{"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-07-15T14:41:40","modified_gmt":"2026-07-15T14:41:40","slug":"candidate-report-templates","status":"publish","type":"page","link":"https:\/\/voicit.com\/en\/plantillas-informes-candidatos\/","title":{"rendered":"Candidate report template generator"},"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  \/* \u2500\u2500 FONDO: toda el \u00e1rea superior (incluida la barra del header) usa el gris del hero \u2192 sin franja blanca \u2500\u2500 *\/\n  body.page-id-8479,\n  body.page-id-8479 div#page.hfeed.site,\n  body.page-id-8479 div#content.site-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 .entry-content,\n  body.page-id-8479 .site-header,\n  body.page-id-8479 #masthead,\n  body.page-id-8479 .ast-primary-header-bar,\n  body.page-id-8479 .main-header-bar {\n    background-color: #F8F8F8 !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\n  \/* Editor (Paso 3, m\u00f3vil) \u2014 bot\u00f3n \"Listo\" *\/\n  .vl-landing .vl-mk-editor-done { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\n  .vl-landing .vl-mk-editor-done:hover { background: #2C2C2C !important; }\n\n  \/* Hero \u2014 bot\u00f3n \"Generar\" (negro de base \u2192 amarillo SOLO al generar) *\/\n  .vl-landing .vl-mk-genbtn { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\n  .vl-landing .vl-mk-genbtn:hover { background: #2C2C2C !important; }\n  .vl-landing .vl-mk-genbtn.is-done { background: #161616 !important; color: #FFFFFF !important; }\n  .vl-landing .vl-mk-genbtn.is-done:hover { background: #262626 !important; }\n  .vl-landing .vl-mk-genbtn .vl-gen-tick { color: #E7FE15 !important; }\n\n  \/* Hero \u2014 iconos Formato\/Longitud de la plantilla: GRISES (no amarillos del tema) + opciones del mini-men\u00fa *\/\n  .vl-landing .vl-mk-cfg-ico { background: #F2F2F2 !important; color: #6E6E6E !important; border: none !important; }\n  .vl-landing .vl-mk-cfg-ico:hover { background: #E6E6E6 !important; color: #161616 !important; }\n  .vl-landing .vl-mk-cfg-ico.is-open { background: #E2E2E2 !important; color: #161616 !important; }\n  .vl-landing .vl-mk-cfg-opt { background: transparent !important; color: #2A2A2A !important; border: none !important; }\n  .vl-landing .vl-mk-cfg-opt:hover { background: #F4F4F4 !important; }\n  .vl-landing .vl-mk-cfg-opt.is-active { background: #F0F0F0 !important; color: #161616 !important; }\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\/* Bloque del CTA final \u2014 tarjeta oscura de esquinas redondeadas sobre fondo claro *\/\n.vl-cta-pill {\n  background: #161616;             \/* bloque OSCURO para que el CTA destaque sobre el fondo claro *\/\n  border-radius: 40px;            \/* rect\u00e1ngulo redondeado (antes 9999px = c\u00e1psula) *\/\n  padding: 56px 80px;\n  max-width: 980px;\n  margin: 0 auto;\n  color: #FFFFFF;\n  position: relative;\n  box-shadow: 0 26px 64px -28px rgba(0,0,0,0.5);\n}\n.vl-cta-pill h2 { color: #FFFFFF !important; }\n.vl-cta-pill p  { color: rgba(255,255,255,0.72) !important; }\n\/* Bot\u00f3n principal: amarillo de marca (permitido sobre oscuro) con destello sutil *\/\n.vl-cta-pill .vl-btn--brand {\n  background: #E7FE15 !important;\n  color: #161616 !important;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n.vl-cta-pill .vl-btn--brand:hover {\n  background: #E7FE15 !important;\n  box-shadow: 0 12px 26px -8px rgba(231,254,21,0.55);   \/* sin \"levantarse\" *\/\n}\n.vl-cta-pill .vl-btn--brand::after {\n  content: '';\n  position: absolute; top: 0; left: -65%; width: 42%; height: 100%;\n  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);\n  transform: skewX(-18deg);\n  pointer-events: none;\n  animation: vl-cta-sheen 3.8s ease-in-out infinite;\n}\n@keyframes vl-cta-sheen {\n  0%, 20%  { left: -65%; }\n  55%, 100% { left: 135%; }\n}\n@media (prefers-reduced-motion: reduce) { .vl-cta-pill .vl-btn--brand::after { animation: none; } }\n\/* Bot\u00f3n secundario en versi\u00f3n oscura *\/\n.vl-cta-pill .vl-btn--secondary {\n  background: transparent !important;\n  border-color: rgba(255,255,255,0.45) !important;\n  color: #FFFFFF !important;\n  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;\n}\n.vl-cta-pill .vl-btn--secondary:hover {\n  border-color: #FFFFFF !important;\n  background: rgba(255,255,255,0.10) !important;   \/* sin \"levantarse\" *\/\n}\n\/* Entrada por opacidad (el escalado\/formaci\u00f3n al hacer scroll los controla el JS) *\/\n.vl-cta-pill { opacity: 0; transition: opacity 0.7s ease, background-color 0.12s linear, box-shadow 0.3s ease; will-change: transform, background-color; transform-origin: 50% 50%; }\n.vl-cta-pill.is-shown { opacity: 1; }\n\/* CTA din\u00e1mico: el t\u00edtulo cambia de color (negro\u2194blanco) con buen contraste seg\u00fan se forma la p\u00edldora *\/\n.vl-cta-pill h2 { transition: color 0.25s ease; will-change: color, transform; transform-origin: center; }\n.vl-cta-pill p, .vl-cta-pill > div { will-change: opacity, transform; }\n\/* CTA con SCROLL-JACK: primero la frase grande, luego se forma la p\u00edldora y el texto se comprime *\/\n.vl-cta-section { position: relative; }\n.vl-cta-track { position: relative; height: 150vh; }\n.vl-cta-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }\n@media (max-width: 1024px) {\n  .vl-cta-track { height: auto; }\n  .vl-cta-sticky { position: static; height: auto; padding: 80px 0 100px; }\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\/* En el Hero el bot\u00f3n secundario va sobre los puntitos: fondo opaco (mismo gris) para que NO se transparenten a trav\u00e9s de \u00e9l *\/\n.vl-hero-actions .vl-btn--secondary { background: #F8F8F8 !important; }\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: #FFFFFF;\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  position: absolute;\n  top: 24px;\n  left: 28px;\n  width: 40px;\n  height: 27px;\n  background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='44' height='30' viewBox='0 0 44 30'%3E%3Cpath d='M5 2 L19 2 L13 28 L1 28 Z' fill='%23E7FE15'\/%3E%3Cpath d='M26 2 L40 2 L34 28 L22 28 Z' fill='%23E7FE15'\/%3E%3C\/svg%3E\") no-repeat center \/ contain;\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\/* La respuesta aparece de forma org\u00e1nica, de arriba hacia abajo, al abrir *\/\n.vl-faq details[open] .vl-faq-answer { animation: vl-faq-open 0.4s cubic-bezier(0.22,1,0.36,1); }\n@keyframes vl-faq-open {\n  from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); }\n  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }\n}\n@media (prefers-reduced-motion: reduce) { .vl-faq details[open] .vl-faq-answer { animation: none; } }\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\/* Orbe animado (sustituye al engranaje): peque\u00f1o, colores de marca, en movimiento continuo *\/\n.vl-orb { position: relative; width: 22px; height: 22px; flex-shrink: 0; }\n.vl-orb-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160%; height: 160%; filter: blur(5px); opacity: 0.55; z-index: 0; pointer-events: none; }\n.vl-orb-main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; overflow: hidden; z-index: 1; background: radial-gradient(circle at 50% 45%, #E7FE15, #CDE213 70%); }\n.vl-orb canvas { display: block; width: 100%; height: 100%; }\n\/* Variante del orbe como avatar del chat (paso 2): rellena el c\u00edrculo de 34px *\/\n.vl-orb--avatar { width: 34px; height: 34px; }\n.vl-orb--avatar .vl-orb-glow { filter: blur(4px); opacity: 0.4; width: 135%; height: 135%; }\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: 22px;          \/* mismo ancho que el orbe \u2192 su punto queda centrado a 11px (alineado con el orbe)\n                           y el texto \"Analizando\u2026\" empieza a la misma x que \"Agente IA de plantillas\" *\/\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\/* \u2500\u2500 Bot\u00f3n \"Generar\" del Hero (negro) \u2192 estado \"\u2713 Generado\" (amarillo) \u2500\u2500 *\/\n.vl-mk-genbtn {\n  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;\n  -webkit-appearance: none; appearance: none;\n  background: #161616; color: #FFFFFF;\n  font-size: 10px; font-weight: 700; padding: 4px 12px;\n  border-radius: 100px; letter-spacing: 0.3px; white-space: nowrap;\n  transition: background-color .45s ease, color .45s ease, opacity .35s ease;\n}\n.vl-mk-genbtn.is-generating { opacity: .8; }\n.vl-mk-genbtn.is-done { background: #161616; color: #FFFFFF; animation: vl-genfade .55s ease; }\n.vl-mk-genbtn .vl-gen-tick { color: #E7FE15; font-weight: 800; }\n@keyframes vl-genfade { from { opacity: .45; } to { opacity: 1; } }\n\n\/* \u2500\u2500 Iconos de config como botones + mini-men\u00fa de selecci\u00f3n \u2500\u2500 *\/\n.vl-mk-cfg-ico { border: none; cursor: pointer; font-family: inherit; padding: 0; -webkit-appearance: none; appearance: none; transition: background-color .18s ease, color .18s ease; position: relative; }\n.vl-mk-cfg-ico:hover { background: #E6E6E6; color: #161616; }\n.vl-mk-cfg-ico.is-open { background: #E2E2E2; color: #161616; }\n.vl-mk-cfg-glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }\n.vl-mk-cfg-menu {\n  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;\n  background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 10px;\n  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.28);\n  padding: 5px; min-width: 150px;\n  display: flex; flex-direction: column; gap: 2px;\n  transform-origin: top right; animation: vl-cfgmenu-in .16s ease-out;\n}\n.vl-mk-cfg-menu.vl-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }\n@keyframes vl-cfgmenu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }\n.vl-mk-cfg-opt {\n  display: flex; align-items: center; gap: 9px;\n  padding: 7px 9px; border-radius: 7px; cursor: pointer;\n  font-size: 12px; font-weight: 600; color: #2A2A2A; white-space: nowrap;\n  border: none; background: transparent; width: 100%; text-align: left; font-family: inherit;\n  -webkit-appearance: none; appearance: none;\n}\n.vl-mk-cfg-opt:hover { background: #F4F4F4; }\n.vl-mk-cfg-opt.is-active { background: #F0F0F0; color: #161616; }\n.vl-mk-cfg-opt-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #6E6E6E; flex-shrink: 0; }\n.vl-mk-cfg-opt.is-active .vl-mk-cfg-opt-ico { color: #161616; }\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 \u2014 fila compacta: etiqueta EN L\u00cdNEA + iconos peque\u00f1os y planos *\/\n.vl-mk-editor-controls {\n  display: flex;\n  align-items: center;\n  gap: 26px;\n  flex-wrap: wrap;\n  opacity: 1;\n}\n.vl-mk-editor-ctrl-group {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 9px;\n}\n.vl-mk-editor-ctrl-label {\n  font-size: 11.5px;\n  color: #9A9A9A;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n}\n.vl-mk-editor-btn-group {\n  display: flex;\n  gap: 2px;\n}\n.vl-mk-editor-icon-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: #6B6B6B;\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 svg { width: 16px; height: 16px; }\n.vl-mk-editor-icon-btn:hover {\n  background: #F0F0F0;\n}\n.vl-mk-editor-icon-btn.is-active {\n  background: #ECECEC;\n  color: #161616;\n}\n.vl-mk-editor-icon-btn.is-active:hover {\n  background: #E2E2E2;\n}\n.vl-mk-editor-hash {\n  font-size: 15px;\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  background: #FFFFFF;\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   PAIN CARDS \u2014 PACK DE EFECTOS\n   (spotlight que sigue al cursor + tilt 3D + borde animado +\n    contadores de \"coste\" + iconos vivos en bucle)\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@property --vl-bang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }\n\n\/* 1) Spotlight que sigue al cursor sobre la secci\u00f3n *\/\n.vl-pain-section { position: relative; }\n.vl-pain-section::before {\n  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;\n  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -20%), rgba(22,22,22,0.07), transparent 60%);\n  opacity: 0; transition: opacity 0.45s ease;\n}\n.vl-pain-section.is-spot::before { opacity: 1; }\n.vl-pain-section > .vl-container { position: relative; z-index: 1; }\n\n\/* 2) Tilt 3D de la tarjeta bajo el cursor *\/\n.vl-grid-3:has(.vl-card--pain) { perspective: 1100px; }\n.vl-pain-card { position: relative; transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease; }\n\/* Zoom al pasar el rat\u00f3n sobre cada columna del pain (ampl\u00eda todo su contenido) *\/\n.vl-pain-card:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 22px 48px -20px rgba(0,0,0,0.22); }\n.vl-pain-inner { position: relative; z-index: 1; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); will-change: transform; }\n\n\/* 3) Borde animado que recorre el contorno (visible siempre; intenso al hover) *\/\n.vl-pain-card::after {\n  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;\n  background: conic-gradient(from var(--vl-bang), transparent 0deg, transparent 70deg, var(--vl-bcol, rgba(22,22,22,0.55)) 135deg, transparent 200deg, transparent 360deg);\n  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor; mask-composite: exclude;\n  animation: vl-border-rot 6s linear infinite;\n  opacity: 0.7; transition: opacity 0.35s ease; pointer-events: none; z-index: 2;\n}\n.vl-pain-card:hover::after { opacity: 1; }\n@keyframes vl-border-rot { to { --vl-bang: 360deg; } }\n\/* Color del borde animado = tonalidad de cada tarjeta al hacer hover *\/\n.vl-card--pain-1 { --vl-bcol: #E6C24A; }   \/* amarillo (como su hover) *\/\n.vl-card--pain-2 { --vl-bcol: #E89B9B; }   \/* rojo\/rosa *\/\n.vl-card--pain-3 { --vl-bcol: #8FB6F0; }   \/* azul *\/\n\n\/* CONTADOR 100% CSS (sin JS): cuenta al pasar el rat\u00f3n por la tarjeta. Misma t\u00e9cnica @property que el borde. *\/\n@property --vl-hw { syntax: '<integer>'; initial-value: 0; inherits: false; }\n@property --vl-hd { syntax: '<integer>'; initial-value: 0; inherits: false; }\n@property --vl-c  { syntax: '<integer>'; initial-value: 0; inherits: false; }\n@property --vl-t  { syntax: '<integer>'; initial-value: 0; inherits: false; }\n\/* La animaci\u00f3n se define en la base PAUSADA (fill forwards) y solo se REPRODUCE al hacer hover.\n   Al quitar el rat\u00f3n vuelve a pausa, pero como ya lleg\u00f3 al 100%, se queda en el valor final. *\/\n.vl-cntr-hours .vl-cntr-n { counter-reset: hw var(--vl-hw) hd var(--vl-hd); animation: vl-cnt-hours 1.4s linear forwards paused; }\n.vl-cntr-hours .vl-cntr-n::after { content: counter(hw) \",\" counter(hd); }\n.vl-cntr-corr  .vl-cntr-n { counter-reset: c var(--vl-c); animation: vl-cnt-corr 1s linear forwards paused; }\n.vl-cntr-corr  .vl-cntr-n::after { content: counter(c); }\n.vl-cntr-tpl   .vl-cntr-n { counter-reset: t var(--vl-t); animation: vl-cnt-tpl 0.7s linear forwards paused; }\n.vl-cntr-tpl   .vl-cntr-n::after { content: counter(t); }\n.vl-pain-card:hover .vl-cntr-n { animation-play-state: running; }\n@keyframes vl-cnt-hours {\n  0%     { --vl-hw: 0; --vl-hd: 0; }\n  38.46% { --vl-hw: 0; --vl-hd: 9; }\n  38.47% { --vl-hw: 1; --vl-hd: 0; }\n  76.92% { --vl-hw: 1; --vl-hd: 9; }\n  76.93% { --vl-hw: 2; --vl-hd: 0; }\n  100%   { --vl-hw: 2; --vl-hd: 5; }\n}\n@keyframes vl-cnt-corr { from { --vl-c: 0; } to { --vl-c: 14; } }\n@keyframes vl-cnt-tpl  { from { --vl-t: 0; } to { --vl-t: 4; } }\n@media (prefers-reduced-motion: reduce) {\n  .vl-cntr-hours .vl-cntr-n { --vl-hw: 2; --vl-hd: 5; }\n  .vl-cntr-corr  .vl-cntr-n { --vl-c: 14; }\n  .vl-cntr-tpl   .vl-cntr-n { --vl-t: 4; }\n  .vl-cntr-n { animation: none !important; }\n}\n\/* M\u00f3vil\/t\u00e1ctil: sin hover no hay quien dispare el contador \u2192 mostrar el n\u00famero definitivo directamente *\/\n@media (hover: none), (max-width: 1024px) {\n  .vl-cntr-hours .vl-cntr-n { --vl-hw: 2; --vl-hd: 5; }\n  .vl-cntr-corr  .vl-cntr-n { --vl-c: 14; }\n  .vl-cntr-tpl   .vl-cntr-n { --vl-t: 4; }\n  .vl-cntr-n { animation: none !important; }\n  .vl-pain-stat::before { animation: none !important; }\n}\n\n\/* 4) Contador de \"coste\" \u2014 p\u00edldora con punto \"en vivo\" *\/\n.vl-pain-stat {\n  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;\n  font-size: 13.5px; font-weight: 800; color: #161616;\n  background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 100px;\n  padding: 7px 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.2px;\n  box-shadow: 0 3px 12px -5px rgba(0,0,0,0.14);\n}\n.vl-pain-stat::before {\n  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #161616;\n  flex-shrink: 0;\n  \/* PAUSADO por defecto (s\u00f3lido, sin parpadeo). Solo parpadea al hacer hover,\n     un n\u00ba finito de veces que coincide con la duraci\u00f3n del contador \u2192 al terminar, se queda quieto. *\/\n  animation: vl-stat-pulse 0.45s ease-in-out 3 paused;\n}\n.vl-cntr-corr::before { animation-duration: 0.5s;  animation-iteration-count: 2; }  \/* ~1s, como su contador *\/\n.vl-cntr-tpl::before  { animation-duration: 0.35s; animation-iteration-count: 2; }  \/* ~0.7s *\/\n.vl-pain-card:hover .vl-pain-stat::before { animation-play-state: running; }\n@keyframes vl-stat-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }\n\n\/* Entrada al hacer scroll: v\u00eda vl-reveal (IntersectionObserver) en cada tarjeta \u2014 fiable y escalonada. *\/\n.vl-pain-card h3 { margin-bottom: 6px; }\n.vl-pain-card .text-small { line-height: 1.55; }\n.vl-pain-stat { margin-top: 16px; padding: 6px 13px; }\n\n\/* \u2550\u2550\u2550 FORMATO EDITORIAL (sin caja): 3 columnas con divisores, sobrio pero con color SUTIL \u2550\u2550\u2550 *\/\n.vl-pain-section::before { display: none !important; }                 \/* (el spotlight se gestiona aparte) *\/\n.vl-pain-section { padding-top: 104px; padding-bottom: 150px; }        \/* m\u00e1s aire arriba y, sobre todo, abajo *\/\n\/* Mayor separaci\u00f3n entre el encabezado y las tres columnas *\/\n.vl-pain-section > .vl-container > .vl-text-center { margin-bottom: 104px !important; }\n.vl-grid-3:has(.vl-card--pain) { gap: 0; }\n.vl-pain-card {\n  background: transparent !important; border: none !important;\n  box-shadow: none !important; border-radius: 0 !important;\n  padding: 52px 46px !important;                                       \/* mucha m\u00e1s respiraci\u00f3n vertical (arriba y abajo) *\/\n}\n.vl-pain-card:hover { box-shadow: none !important; }\n.vl-pain-card::after { display: none !important; }                      \/* fuera el borde animado de color *\/\n.vl-pain-inner { transform: none !important; }                         \/* fuera el tilt 3D *\/\n.vl-pain-card + .vl-pain-card { border-left: 1px solid #E6E6E6; }      \/* divisores verticales finos *\/\n\/* Icono con color MUY sutil y constante por columna (diferenciaci\u00f3n discreta) *\/\n.vl-pain-card .vl-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; }\n.vl-pain-card .vl-icon svg { width: 28px; height: 28px; }\n.vl-pain-card .vl-icon img { width: 28px; height: 28px; }\n.vl-card--pain-1 .vl-icon { background: #F7F1DF !important; }           \/* amarillo muy p\u00e1lido *\/\n.vl-card--pain-2 .vl-icon { background: #F6E9EA !important; }           \/* rojo muy p\u00e1lido *\/\n.vl-card--pain-3 .vl-icon { background: #E9EFF7 !important; }           \/* azul muy p\u00e1lido *\/\n\/* Hover: tarjeta de CRISTAL (frosted glass) \u2014 deja ver los puntitos del fondo desenfocados, texto m\u00e1s legible *\/\n.vl-card--pain-1:hover, .vl-card--pain-2:hover, .vl-card--pain-3:hover {\n  background: rgba(255,255,255,0.5) !important;\n  -webkit-backdrop-filter: blur(12px) saturate(1.2);\n          backdrop-filter: blur(12px) saturate(1.2);\n  border-radius: 22px !important;\n  border: 1px solid rgba(255,255,255,0.7) !important;\n  box-shadow: 0 24px 54px -24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.8) !important;\n}\n@media (max-width: 900px) {\n  .vl-pain-section { padding-top: 64px; padding-bottom: 64px; }\n  .vl-pain-card { padding: 26px 0 !important; }\n  .vl-pain-card + .vl-pain-card { border-left: none; border-top: 1px solid #E6E6E6; }\n}\n\n\/* 5) Iconos: reloj de arena y \"X\" se animan SOLO al hover (comportamiento original). El engranaje gira en bucle. *\/\n.vl-card--pain-3 .vl-pain-icon-img { animation: vl-pain-spin 9s linear infinite !important; animation-play-state: running !important; }\n\n@media (prefers-reduced-motion: reduce) {\n  .vl-pain-card::after,\n  .vl-card--pain-1 .vl-pain-icon-svg,\n  .vl-card--pain-2 .vl-pain-icon-svg,\n  .vl-card--pain-3 .vl-pain-icon-img { animation: none; }\n  .vl-pain-section::before { display: none; }\n}\n@media (max-width: 900px) {\n  .vl-pain-section::before { display: none; }   \/* sin spotlight en m\u00f3vil *\/\n  .vl-pain-inner { transform: none !important; } \/* sin tilt en m\u00f3vil *\/\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 \"Antes \/ Ahora\"\n   \u00b7 ESCRITORIO (>1024px): scroll fijado \u2014 la flecha se dibuja y el \"Ahora\" entra al hacer scroll (JS).\n   \u00b7 M\u00d3VIL (\u22641024px): SIN scroll fijado \u2014 se desarrolla de forma natural al entrar en pantalla (IO + CSS).\n   POR DEFECTO TODO VISIBLE (si el JS no corre, no se oculta nada).\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; top: 0; height: 100vh;\n  display: flex; flex-direction: column; justify-content: center;\n  box-sizing: border-box; padding: 40px 0;\n}\n\/* Transiciones BASE (escritorio, dirigidas por scroll: cortas y sin retardo) *\/\n.vl-compare-arrow svg path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.12s linear; }\n.vl-compare-card--after { transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform; }\n.vl-compare-card--after .vl-compare-list li { transition: opacity 0.25s ease, transform 0.25s ease; will-change: opacity, transform; }\n\n\/* M\u00d3VIL: revelado natural escalonado (lo activa el JS a\u00f1adiendo .vl-cmp-prep y luego .is-live) *\/\n.vl-cmp-section.vl-cmp-prep .vl-compare-arrow svg path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease 0.15s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease 0.45s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(1) { transition-delay: 0.95s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(2) { transition-delay: 1.20s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(3) { transition-delay: 1.45s; }\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-arrow svg path { stroke-dashoffset: 0; }\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-card--after { opacity: 1; transform: none; }\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-card--after .vl-compare-list li { opacity: 1; transform: none; }\n\n@media (max-width: 1024px) {\n  \/* Quitamos el scroll fijado: la secci\u00f3n fluye con naturalidad *\/\n  .vl-cmp-track { height: auto; }\n  .vl-cmp-sticky { position: static; height: auto; padding: 16px 0; }\n  .vl-sstep .vl-mk-chat { text-align: left; }                                    \/* el chat del paso 2 no va centrado *\/\n  .vl-compare-card { padding: 22px 20px 24px; }\n  .vl-compare-title { font-size: 16px; padding-bottom: 14px; margin-bottom: 14px; }\n  .vl-compare-list { gap: 12px; }\n  .vl-compare-list li { font-size: 14.5px; }\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; background: #F8F8F8; padding-top: 6vh; }   \/* peque\u00f1o respiro antes del bloque fijo *\/\n\/* El t\u00edtulo de los pasos arranca transparente y se revela con un fundido al hacer scroll (JS controla la opacidad) *\/\n.vl-ssteps-dtitle, .vl-ssteps-progress { will-change: opacity, transform; }\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\/* T\u00edtulo m\u00f3vil (en flujo normal) oculto en escritorio *\/\n.vl-ssteps-mtitle { display: none; }\n\/* Track: da el \"recorrido\" de scroll. ~135vh por paso. *\/\n.vl-ssteps-track { position: relative; height: 320vh; z-index: 1; }   \/* por delante de la capa de puntos de la secci\u00f3n *\/\n\/* Lo que se queda fijo en pantalla mientras dura el track *\/\n.vl-ssteps-sticky {\n  position: sticky;\n  top: 112px;                      \/* despeja el header fijo del sitio (~75px) + algo de aire extra *\/\n  height: calc(100vh - 112px);\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: 28px 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  position: relative; cursor: pointer;   \/* clicables: llevan a su paso *\/\n}\n\/* Relleno NEGRO que crece de izquierda a derecha seg\u00fan el scroll \u2192 feedback continuo de que el scroll avanza *\/\n.vl-ssteps-progress span::after {\n  content: ''; position: absolute; left: 0; top: 0; bottom: 0;\n  width: calc(var(--fill, 0) * 100%);\n  background: #161616; border-radius: inherit;\n  transition: width 0.12s linear;\n}\n.vl-ssteps-progress span::before { content: ''; position: absolute; inset: -14px -5px; z-index: 1; }  \/* \u00e1rea de click m\u00e1s amplia *\/\n.vl-ssteps-progress span:hover { background: #C8C8C8; }\n.vl-ssteps-progress span.is-active { width: 44px; }   \/* el paso actual es m\u00e1s ancho; el color lo aporta el relleno *\/\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  \/* M\u00d3VIL\/TABLET: SIN scroll fijado. Los 3 pasos se apilan en flujo normal, uno tras otro. *\/\n  .vl-ssteps { padding-top: 0; }\n  .vl-ssteps .vl-container { padding-left: 24px; padding-right: 24px; }\n  .vl-ssteps-mtitle { display: block; text-align: center; padding: 40px 24px 8px; }\n  .vl-ssteps-dtitle { display: none; }\n  .vl-ssteps-progress { display: none; }\n  \/* Quitamos el sticky: track y sticky en flujo normal *\/\n  .vl-ssteps-track { height: auto; }\n  .vl-ssteps-sticky { position: static; height: auto; padding: 8px 0 0; background: transparent; }\n  .vl-ssteps-stage { min-height: 0; }\n  \/* Cada paso deja de estar superpuesto (absolute) y pasa a apilarse, siempre visible *\/\n  .vl-sstep {\n    position: static; inset: auto;\n    opacity: 1 !important; transform: none !important; pointer-events: auto;\n    flex-direction: column !important;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 12px;\n    text-align: center;\n    margin: 0 0 56px;\n  }\n  .vl-sstep:last-child { margin-bottom: 0; }\n  .vl-sstep > div:first-child, .vl-sstep > div:last-child { flex: 0 0 auto !important; width: 100%; }\n  .vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: center; }\n  .vl-sstep .vl-mb-16 { justify-content: center; margin-bottom: 6px !important; }\n  .vl-sstep p { font-size: 14.5px; line-height: 1.45; margin-bottom: 2px !important; }\n  .vl-sstep .vl-info-tooltip { display: none; }\n  .vl-ssteps .vl-mk-filepicker, .vl-ssteps .vl-mk-chat, .vl-ssteps .vl-mk-editor { max-width: 420px; margin: 0 auto; }\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   CASOS DE USO \u2014 CONSTELACI\u00d3N INTERACTIVA\n   Nodos redondos unidos por l\u00edneas que se \"dibujan\" al hacer scroll.\n   Hover: resalta el nodo y muestra su descripci\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-constellation { position: relative; max-width: 1040px; margin: 0 auto; min-height: 600px; }\n\/* \u2500\u2500 CAPA DE PUNTOS REUTILIZABLE (Hero, pain y casos de uso) \u2500\u2500\n   Base muy tenue a lo ancho de toda la secci\u00f3n; al mover el rat\u00f3n se iluminan en un radio amplio alrededor del cursor. *\/\n.vl-dots { position: relative; }\n.vl-dots > .vl-container { position: relative; z-index: 1; }\n\/* Cualquier hijo directo (track, container--narrow, mtitle\u2026) por ENCIMA de la capa de puntos *\/\n.vl-dots > *:not(.vl-dots-layer) { position: relative; z-index: 1; }\n.vl-dots-layer {\n  position: absolute; inset: 0; z-index: 0; pointer-events: none;\n  background-image: radial-gradient(#CFCFCF 1.4px, transparent 1.6px);\n  background-size: 24px 24px;\n  opacity: 0.14;                          \/* base muy tenue en todo el ancho *\/\n  transition: opacity 0.4s ease;\n}\n.vl-dots.is-lit .vl-dots-layer {\n  -webkit-mask: radial-gradient(circle 360px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,0.5) 48%, transparent 80%);\n          mask: radial-gradient(circle 360px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,0.5) 48%, transparent 80%);\n  opacity: 0.95;\n}\n.vl-cst-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }\n.vl-cst-line { stroke: #D7D7D7; stroke-width: 1.5; fill: none; opacity: 0; transition: opacity 0.6s ease; }\n.vl-constellation.is-drawn .vl-cst-line { opacity: 1; }\n.vl-cst-node {\n  position: absolute; left: var(--x); top: var(--y);\n  width: 152px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;\n  z-index: 2; opacity: 0; transform: translate(-50%,-50%) scale(0.55);\n  transition: opacity 0.6s ease;   \/* el transform lo controla el JS (salida desde el centro + flotaci\u00f3n) *\/\n}\n.vl-constellation.is-drawn .vl-cst-node { opacity: 1; }\n\/* fallback sin JS \/ reduced-motion: posici\u00f3n final *\/\n.vl-constellation.is-drawn .vl-cst-node { transform: translate(-50%,-50%) scale(1); }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"0\"] { transition-delay: 0s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"1\"] { transition-delay: 0.08s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"2\"] { transition-delay: 0.16s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"3\"] { transition-delay: 0.24s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"4\"] { transition-delay: 0.32s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"5\"] { transition-delay: 0.40s; }\n.vl-cst-dot {\n  position: relative; overflow: hidden;\n  width: 86px; height: 86px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  \/* Volumen de esfera: brillo arriba + sombra interior abajo + sombra de apoyo *\/\n  box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 10px 24px -10px rgba(0,0,0,0.20);\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\n}\n\/* Reflejo glossy en la esquina superior \u2192 aspecto de burbuja\/esfera *\/\n.vl-cst-dot::before {\n  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none;\n  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.92), rgba(255,255,255,0.25) 40%, rgba(255,255,255,0) 62%);\n}\n.vl-cst-dot svg { width: 38px; height: 38px; position: relative; z-index: 1; }\n.vl-cst-label { font-size: 15px; font-weight: 700; color: #161616; line-height: 1.25; margin: 0; }\n.vl-cst-desc {\n  position: absolute; top: calc(100% + 10px); left: 50%;\n  transform: translateX(-50%) translateY(4px);\n  width: 214px; background: #161616; color: #FFFFFF;\n  font-size: 12.5px; line-height: 1.45; padding: 10px 13px; border-radius: 10px;\n  opacity: 0; pointer-events: none; z-index: 5;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.vl-cst-node--up .vl-cst-desc { top: auto; bottom: calc(100% + 10px); }\n.vl-cst-node:hover { z-index: 6; }\n.vl-cst-node:hover .vl-cst-dot { transform: scale(1.12); box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 18px 36px -12px rgba(0,0,0,0.28); }\n.vl-cst-node:hover .vl-cst-desc { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n@media (max-width: 1024px) {\n  \/* Sin hover en tablet\/m\u00f3vil: rejilla simple con icono + t\u00edtulo + descripci\u00f3n siempre visible *\/\n  .vl-constellation { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }\n  .vl-dots-layer { display: none; }\n  .vl-cst-svg { display: none; }\n  .vl-cst-node { position: static; transform: none !important; opacity: 1 !important; width: auto; transition: none; }\n  \/* En vertical mostramos solo icono + t\u00edtulo; ocultamos la descripci\u00f3n *\/\n  .vl-cst-desc { display: none !important; }\n  .vl-cst-node:hover .vl-cst-dot { transform: none; box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 10px 24px -10px rgba(0,0,0,0.20); }\n}\n\n\/* \u2550\u2550\u2550 TIRA DE PROCESO: flechas (chevrons) encadenadas con icono + etiqueta dentro \u2550\u2550\u2550 *\/\n.vl-chevflow { display: flex; margin-top: 66px; position: relative; padding-bottom: 96px; }   \/* m\u00e1s aire respecto al t\u00edtulo; hueco para la tarjeta del mensaje *\/\n\/* El relleno de la flecha va en ::after (la flecha en s\u00ed NO se recorta, para que la sombra\n   pueda asomar por todo el contorno: muesca izquierda y punta derecha incluidas). *\/\n.vl-chev {\n  position: relative; flex: 1 1 0; min-width: 0;\n  display: flex; align-items: center; gap: 11px;\n  height: 80px; padding: 0 14px 0 58px;\n  margin-left: -24px;\n  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;\n}\n.vl-chev::after {\n  content: ''; position: absolute; inset: 0; z-index: 1;\n  background: #FFFFFF;\n  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);\n  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.08));\n  transition: background 0.3s ease, filter 0.32s ease;\n}\n.vl-chev:first-child { margin-left: 0; padding-left: 58px; }\n.vl-chev:first-child::after {\n  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);\n}\n.vl-chev:nth-child(1) { z-index: 6; }\n.vl-chev:nth-child(2) { z-index: 5; }\n.vl-chev:nth-child(3) { z-index: 4; }\n.vl-chev:nth-child(4) { z-index: 3; }\n.vl-chev:nth-child(5) { z-index: 2; }\n\/* Foco: la etapa enfocada (clase .vl-on puesta por JS, no por :hover puro \u2014 as\u00ed sigue\n   marcada aunque el rat\u00f3n baje hacia la tarjeta) se ti\u00f1e de su pastel, se ampl\u00eda y gana\n   una sombra marcada que rodea todo su contorno; las dem\u00e1s se aten\u00faan. *\/\n.vl-chevflow.vl-has-focus .vl-chev { opacity: 0.32; }\n.vl-chevflow.vl-has-focus .vl-chev.vl-on { opacity: 1; z-index: 10; transform: scale(1.04); transform-origin: 50% 100%; }\n.vl-chev.vl-on::after {\n  filter: drop-shadow(0 4px 13px rgba(0,0,0,0.18)) drop-shadow(0 0 5px rgba(0,0,0,0.13));\n}\n\/* Cada etapa estrena su propio pastel al enfocarse (amarillo \u2192 azul \u2192 lila \u2192 verde \u2192 rosa) *\/\n.vl-chev:nth-child(1).vl-on::after { background: #FBEFB0; }\n.vl-chev:nth-child(2).vl-on::after { background: #DCEAF9; }\n.vl-chev:nth-child(3).vl-on::after { background: #E7DBFA; }\n.vl-chev:nth-child(4).vl-on::after { background: #D6EFD9; }\n.vl-chev:nth-child(5).vl-on::after { background: #FAD9DE; }\n.vl-chev-ico { position: relative; z-index: 2; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }\n.vl-chev-ico svg { width: 29px; height: 29px; }\n\/* N\u00famero de paso (1..5) a la izquierda del icono \u2192 se lee como una cadena de pasos *\/\n.vl-chev-num {\n  position: absolute; left: 33px; top: 50%; transform: translateY(-50%); z-index: 3;\n  width: 20px; height: 20px; border-radius: 50%;\n  background: #161616; color: #FFFFFF;\n  font-size: 10.5px; font-weight: 800; line-height: 1;\n  display: flex; align-items: center; justify-content: center;\n}\n.vl-chev-label { position: relative; z-index: 2; font-size: 15.5px; font-weight: 700; color: #161616; line-height: 1.18; }\n\/* Tarjeta del mensaje: aparece SOLO al pasar el rat\u00f3n, posicionada por JS justo debajo de la etapa enfocada (alineada en X) *\/\n.vl-chev-caption {\n  position: absolute; top: 84px; left: 0;\n  width: max-content; max-width: 340px; padding: 14px 22px;\n  background: #FFFFFF; color: #2E2E2E;\n  border: 1px solid #ECECEC; border-radius: 12px;\n  font-size: 15.5px; line-height: 1.45; text-align: center;\n  box-shadow: 0 16px 38px -18px rgba(0,0,0,0.20);\n  opacity: 0; pointer-events: none; z-index: 12;\n  transition: opacity 0.22s ease, left 0.3s cubic-bezier(0.22,1,0.36,1);\n}\n.vl-chev-caption.is-on { opacity: 1; }\n\/* M\u00e1s protagonismo: m\u00e1s aire arriba\/abajo y t\u00edtulo de secci\u00f3n m\u00e1s grande *\/\n.vl-section.vl-casos { padding-top: 140px; padding-bottom: 140px; }\n.vl-casos h2 { font-size: 44px; line-height: 1.12; }\n\n\/* M\u00d3VIL + TABLET (incl. vertical \u22641024px): los chevrons se apilan en vertical, apuntando hacia abajo\n   (en horizontal, 5 flechas no caben por debajo de ~1080px y el texto\/forma se rompen). *\/\n@media (max-width: 1024px) {\n  .vl-chevflow { flex-direction: column; margin-top: 30px; padding-bottom: 0; }\n  .vl-chev {\n    flex: none; width: 100%; height: 64px; margin-left: 0; margin-top: -16px;\n    padding: 0 24px 0 56px; gap: 14px;\n  }\n  .vl-chev::after {\n    clip-path: polygon(0 0, 50% 17px, 100% 0, 100% calc(100% - 17px), 50% 100%, 0 calc(100% - 17px));\n  }\n  .vl-chev:first-child { margin-top: 0; padding-left: 56px; }\n  .vl-chev:first-child::after {\n    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), 50% 100%, 0 calc(100% - 17px));\n  }\n  .vl-chev-num { left: 22px; }\n  .vl-chev-label { font-size: 14px; }\n  .vl-chev-ico svg { width: 26px; height: 26px; }\n  .vl-section.vl-casos { padding-top: 72px; padding-bottom: 72px; }\n  .vl-casos h2 { font-size: 30px; }\n  .vl-chev-caption {\n    position: static; display: none; width: auto; max-width: 100%;\n    left: auto; margin: 20px auto 0; font-size: 15px;\n  }\n  .vl-chev-caption.is-on { display: block; }\n}\n\n\n\/* \u2550\u2550\u2550 MURO DEL AMOR: rese\u00f1as de fondo (estilo cr\u00e9ditos Star Wars) \u2550\u2550\u2550 *\/\n\/* OJO: NO cambiar el position de .vl-tstack-sticky (es sticky y ya contiene el muro absoluto). *\/\n.vl-tstack-sticky > .vl-container { position: relative; z-index: 3; }\n.vl-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 30%; }\n.vl-wall::after {            \/* velo SUTIL: difumina arriba\/abajo (estilo cr\u00e9ditos) + leve halo central, dejando ver el muro *\/\n  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;\n  background:\n    radial-gradient(ellipse 46% 118% at 50% 46%, rgba(248,248,248,0.96) 0%, rgba(248,248,248,0.68) 40%, rgba(248,248,248,0) 72%),\n    linear-gradient(180deg, #F8F8F8 0%, rgba(248,248,248,0) 20%, rgba(248,248,248,0) 80%, #F8F8F8 100%);\n}\n.vl-wall-inner {\n  position: absolute; left: 50%; top: -8%; width: 168%;\n  transform-origin: 50% 0;\n  transform: translateX(-50%) rotateX(42deg);\n  transform-style: preserve-3d;\n  opacity: 0.7; filter: blur(1px);   \/* el muro queda como fondo: suave y desenfocado *\/\n  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;\n  animation: vl-wall-rise 55s linear infinite;\n}\n@keyframes vl-wall-rise {\n  from { transform: translateX(-50%) rotateX(42deg) translateY(0); }\n  to   { transform: translateX(-50%) rotateX(42deg) translateY(-50%); }\n}\n.vl-wall-card {\n  background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 10px;\n  padding: 12px 13px; box-shadow: 0 4px 14px -11px rgba(0,0,0,0.10);\n  text-align: left;\n}\n.vl-wall-stars { color: #CFCFCF; font-size: 11px; letter-spacing: 1px; }\n.vl-wall-txt { font-size: 12.5px; line-height: 1.4; color: #7C7C7C; margin: 6px 0 8px; }\n.vl-wall-who { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #6A6A6A; }\n.vl-wall-ava { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,#C2C2C2,#D8D8D8); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n@media (prefers-reduced-motion: reduce) { .vl-wall-inner { animation: none; } }\n@media (max-width: 900px) { .vl-wall { display: none; } }   \/* en m\u00f3vil el muro mete ruido sobre el t\u00edtulo y pesa en GPU \u2192 fuera *\/\n\n\/* \u2550\u2550\u2550 M\u00d3VIL VERTICAL: textos resumidos en los pasos 2 y 3 (m\u00e1x. 2 l\u00edneas) \u2550\u2550\u2550 *\/\n.vl-p-short { display: none; }\n@media (max-width: 599px) {\n  .vl-p-full { display: none; }\n  .vl-p-short { display: inline; }\n}\n\n\/* El CTA \"Comenzar gratis\" del header m\u00f3vil ahora es GLOBAL (Code Snippets id 25), no por landing. *\/\n\n\/* \u2550\u2550\u2550 M\u00d3VIL: editor del paso 3 \u2014 al abrir una secci\u00f3n solo se muestra esa (ahorro vertical) \u2550\u2550\u2550 *\/\n.vl-mk-editor-done { display: none; }   \/* el bot\u00f3n \"Listo\" solo existe en m\u00f3vil *\/\n@media (max-width: 1024px) {\n  .vl-mk-editor--solo [data-vl-section]:not(.vl-mk-editor-section--open) { display: none; }\n  .vl-mk-editor-done {\n    display: inline-flex; align-items: center; justify-content: center;\n    align-self: flex-end; margin-top: 6px; padding: 9px 22px;\n    border: none; border-radius: 8px; cursor: pointer;\n    font-size: 13px; font-weight: 700;\n  }\n}\n\n\/* \u2550\u2550\u2550 M\u00d3VIL: testimonios SIN scroll fijado \u2014 las 3 rese\u00f1as en flujo normal (scroll t\u00e1ctil fluido) \u2550\u2550\u2550 *\/\n@media (max-width: 1024px) {\n  .vl-tstack-track { height: auto; }\n  .vl-tstack-sticky { position: static; height: auto; padding: 40px 0 56px; overflow: visible; }\n  .vl-tstack-cards { min-height: 0; max-width: 540px; }\n  .vl-tstack-card {\n    position: static !important;\n    transform: none !important;\n    opacity: 1 !important;\n    transition: none !important;\n    margin: 0 0 18px !important;\n  }\n  \/* aire entre las rese\u00f1as y el t\u00edtulo de la siguiente secci\u00f3n (\"Un verdadero cambio\u2026\") *\/\n  .vl-tstack-section { padding-bottom: 48px !important; }\n}\n\n\/* \u2550\u2550\u2550 DISPOSITIVOS T\u00c1CTILES (iPad \/ iPhone): SIN scroll-jacking en NINGUNA secci\u00f3n fija \u2550\u2550\u2550\n   En t\u00e1ctil la barra del navegador se oculta\/muestra al hacer scroll, cambia el alto del viewport\n   y los elementos `sticky` \"vibran\" arriba\/abajo. Esto pasa TODAS las secciones fijas a flujo\n   normal en cualquier ancho\/orientaci\u00f3n (tambi\u00e9n iPad en horizontal >1024px).\n   NO afecta a port\u00e1tiles aunque tengan pantalla t\u00e1ctil: su puntero principal es \"fino\" (trackpad). *\/\n@media (hover: none) and (pointer: coarse) {\n  .vl-ssteps-track, .vl-cmp-track, .vl-tstack-track, .vl-cta-track { height: auto !important; }\n  .vl-ssteps-sticky, .vl-cmp-sticky, .vl-tstack-sticky { position: static !important; height: auto !important; }\n  .vl-cta-sticky { position: static !important; height: auto !important; padding: 60px 0 !important; }\n  .vl-ssteps-progress { display: none !important; }\n  .vl-ssteps-stage { min-height: 0 !important; }\n  .vl-sstep {\n    position: static !important; inset: auto !important;\n    opacity: 1 !important; transform: none !important; pointer-events: auto !important;\n    margin: 0 0 64px !important;\n  }\n  .vl-sstep:last-child { margin-bottom: 0 !important; }\n  .vl-tstack-card {\n    position: static !important; transform: none !important; opacity: 1 !important;\n    transition: none !important; margin: 0 0 18px !important;\n  }\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 vl-dots\" style=\"padding-top:60px;padding-bottom:80px;background:#F8F8F8;\">\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\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 ejemplo de informe de candidato que ya te guste y la IA aprender\u00e1 tu estructura y tu forma de redactar. Desde la primera entrevista, cada informe ser\u00e1 como t\u00fa quieres \u2014 sin pasar horas retocando.\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                  <span class=\"vl-orb\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\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\">\u2728 Plantilla \u2014 Entrevista de selecci\u00f3n<\/div>\n                <button type=\"button\" class=\"vl-mk-genbtn\" data-vl-gen aria-label=\"Generar plantilla\">Generar<\/button>\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                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"formato\" data-vl-val=\"bullets\" title=\"Formato: bullet points\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"longitud\" data-vl-val=\"corta\" title=\"Longitud: corto\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Trayectoria profesional<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"formato\" data-vl-val=\"redactado\" title=\"Formato: redactado\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"longitud\" data-vl-val=\"media\" title=\"Longitud: medio\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Competencias evaluadas<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"formato\" data-vl-val=\"bullets\" title=\"Formato: bullet points\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"longitud\" data-vl-val=\"larga\" title=\"Longitud: largo\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Rango salarial<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"formato\" data-vl-val=\"hashtag\" title=\"Formato: num\u00e9rico\"><span class=\"vl-mk-cfg-glyph\"><span style=\"font-weight:800;font-size:14px;line-height:1;\">#<\/span><\/span><\/button>\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"longitud\" data-vl-val=\"corta\" title=\"Longitud: corto\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                  <\/span>\n                <\/li>\n                <li>\n                  <span class=\"vl-mk-section-text\">Conclusiones<\/span>\n                  <span class=\"vl-mk-cfg\">\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"formato\" data-vl-val=\"redactado\" title=\"Formato: redactado\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\n                    <button type=\"button\" class=\"vl-mk-cfg-ico\" data-vl-cfgbtn=\"longitud\" data-vl-val=\"corta\" title=\"Longitud: corto\"><span class=\"vl-mk-cfg-glyph\"><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><\/button>\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 vl-pain-section vl-dots\">\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\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 una plantilla de informe de entrevista no deber\u00eda llevarte horas<\/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-pain-card vl-reveal vl-reveal-delay-1\">\n          <div class=\"vl-pain-inner\">\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 class=\"vl-pain-stat vl-cntr vl-cntr-hours\"><span class=\"vl-cntr-txt\">Horas perdidas: <span class=\"vl-cntr-n\"><\/span> h<\/span><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Pain 2 -->\n        <div class=\"vl-card vl-card--pain vl-card--pain-2 vl-pain-card vl-reveal vl-reveal-delay-2\">\n          <div class=\"vl-pain-inner\">\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 class=\"vl-pain-stat vl-cntr vl-cntr-corr\"><span class=\"vl-cntr-txt\"><span class=\"vl-cntr-n\"><\/span> correcciones<\/span><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Pain 3 -->\n        <div class=\"vl-card vl-card--pain vl-card--pain-3 vl-pain-card vl-reveal vl-reveal-delay-3\">\n          <div class=\"vl-pain-inner\">\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\" width=\"32\" height=\"32\"><\/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 class=\"vl-pain-stat vl-cntr vl-cntr-tpl\"><span class=\"vl-cntr-txt\"><span class=\"vl-cntr-n\"><\/span> plantillas\/mes<\/span><\/div>\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       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\n    <!-- T\u00edtulo en flujo normal SOLO para m\u00f3vil\/tablet: sube y desaparece al hacer scroll -->\n    <div class=\"vl-ssteps-mtitle vl-container\">\n      <h2 style=\"margin:0 auto;\">Tu plantilla 100 % configurada en 3 pasos<\/h2>\n    <\/div>\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 vl-ssteps-dtitle\">\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\"><span class=\"vl-p-full\">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><span class=\"vl-p-short\">Voicit analiza tu informe y genera instrucciones precisas para cada secci\u00f3n.<\/span><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                <span class=\"vl-orb vl-orb--avatar\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\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                <span class=\"vl-orb vl-orb--avatar\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\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\"><span class=\"vl-p-full\">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><span class=\"vl-p-short\">Retoca lo que necesites y guarda tu plantilla definitiva.<\/span><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\">\u2728 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-instr-key=\"0\" 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-instr-key=\"1\" 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-instr-key=\"2\" 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-instr-key=\"3\" 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-instr-key=\"4\" 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 vl-dots vl-casos\" style=\"background:#F8F8F8;\">\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Plantillas de informes de selecci\u00f3n para cada etapa del proceso<\/h2>\n      <\/div>\n\n      <div class=\"vl-chevflow vl-reveal\">\n\n        <div class=\"vl-chev\" style=\"--c:#F8F0D2;\" data-desc=\"Requisitos del perfil, competencias ideales, descripci\u00f3n del puesto y contexto de la empresa.\">\n          <span class=\"vl-chev-num\">1<\/span>\n          <span class=\"vl-chev-ico\"><svg 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><\/span>\n          <span class=\"vl-chev-label\">Informe de requerimientos<\/span>\n        <\/div>\n\n        <div class=\"vl-chev\" style=\"--c:#E6EEFB;\" data-desc=\"Res\u00famenes de las primeras llamadas de screening telef\u00f3nico.\">\n          <span class=\"vl-chev-num\">2<\/span>\n          <span class=\"vl-chev-ico\"><svg 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><\/span>\n          <span class=\"vl-chev-label\">Criba telef\u00f3nica<\/span>\n        <\/div>\n\n        <div class=\"vl-chev\" style=\"--c:#EFE7FB;\" data-desc=\"Evaluaci\u00f3n estructurada de cada competencia clave del rol.\">\n          <span class=\"vl-chev-num\">3<\/span>\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"7.5\" cy=\"12.5\" r=\"2.3\" fill=\"#1A171B\"\/><path d=\"M3.5 23c0-2.3 1.8-4 4-4s4 1.7 4 4v.6h-8z\" fill=\"#1A171B\"\/><circle cx=\"24.5\" cy=\"12.5\" r=\"2.3\" fill=\"#1A171B\"\/><path d=\"M20.5 23c0-2.3 1.8-4 4-4s4 1.7 4 4v.6h-8z\" fill=\"#1A171B\"\/><circle cx=\"16\" cy=\"10\" r=\"3.1\" fill=\"#1A171B\"\/><path d=\"M10.8 24c0-2.9 2.3-5.2 5.2-5.2s5.2 2.3 5.2 5.2v.6H10.8z\" fill=\"#1A171B\"\/><\/svg><\/span>\n          <span class=\"vl-chev-label\">Entrevistas por competencias<\/span>\n        <\/div>\n\n        <div class=\"vl-chev\" style=\"--c:#E5F3E8;\" data-desc=\"El perfil documentado a partir de toda la informaci\u00f3n del proceso.\">\n          <span class=\"vl-chev-num\">4<\/span>\n          <span class=\"vl-chev-ico\"><svg 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=\"#FFFFFF\"\/><path d=\"M7 17.5c0-2 1.8-3.5 4-3.5s4 1.5 4 3.5V19H7v-1.5z\" fill=\"#FFFFFF\"\/><rect x=\"17\" y=\"9\" width=\"7\" height=\"1.8\" fill=\"#FFFFFF\"\/><rect x=\"17\" y=\"13\" width=\"7\" height=\"1.8\" fill=\"#FFFFFF\"\/><rect x=\"8\" y=\"22\" width=\"16\" height=\"1.8\" fill=\"#FFFFFF\"\/><rect x=\"8\" y=\"25.5\" width=\"11\" height=\"1.8\" fill=\"#FFFFFF\"\/><\/svg><\/span>\n          <span class=\"vl-chev-label\">Informe de candidato<\/span>\n        <\/div>\n\n        <div class=\"vl-chev\" style=\"--c:#FBE6E9;\" data-desc=\"El entregable final de cada candidato presentado al cliente.\">\n          <span class=\"vl-chev-num\">5<\/span>\n          <span class=\"vl-chev-ico\"><svg 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=\"#FFFFFF\"\/><rect x=\"12.5\" y=\"11\" width=\"3.5\" height=\"9\" fill=\"#FFFFFF\"\/><rect x=\"18\" y=\"13\" width=\"3.5\" height=\"7\" fill=\"#FFFFFF\"\/><rect x=\"23.5\" y=\"8\" width=\"3\" height=\"12\" fill=\"#FFFFFF\"\/><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><\/span>\n          <span class=\"vl-chev-label\">Informe para el cliente<\/span>\n        <\/div>\n\n        <p class=\"vl-chev-caption\" id=\"vl-chev-cap\"><\/p>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       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-wall\" aria-hidden=\"true\" data-nosnippet>\n        <div class=\"vl-wall-inner\"><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra horas cada semana, los res\u00famenes salen clavados.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LM<\/span>Laura M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cImprescindible para mis entrevistas, la IA lo capta todo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CR<\/span>Carlos R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa transcripci\u00f3n es perfecta y el informe sale solo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MG<\/span>Marta G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAntes tardaba media hora; ahora segundos. Brutal.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JS<\/span>Javier S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl mejor asistente para reuniones que he probado.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NP<\/span>Nuria P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes precisos y con mi estilo. 10\/10.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DA<\/span>Diego A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo recomiendo a todo mi equipo de selecci\u00f3n.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">EV<\/span>Elena V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cFunciona incre\u00edble en llamadas y presencial.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PC<\/span>Pablo C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe cambi\u00f3 la forma de documentar candidatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SL<\/span>Sara L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cR\u00e1pido, fiable y muy f\u00e1cil de usar.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">HD<\/span>Hugo D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa calidad de los informes es alt\u00edsima.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AT<\/span>Ana T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cYa no tomo notas a mano. Una maravilla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IR<\/span>Iv\u00e1n R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura cada detalle de la entrevista.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LF<\/span>Luc\u00eda F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSencillo y potente, justo lo que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MB<\/span>Marc B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes salen perfectos en un clic.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CN<\/span>Cristina N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhorro de tiempo enorme en cada proceso.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RM<\/span>Ra\u00fal M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa herramienta que no sab\u00eda que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PG<\/span>Patricia G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cTranscribe y resume mejor que nadie.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SH<\/span>Sergio H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cIndispensable para mi d\u00eda a d\u00eda en RRHH.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">BO<\/span>Beatriz O.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cResultados consistentes y muy profesionales.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00c1J<\/span>\u00c1lvaro J.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPas\u00e9 de odiar los informes a tenerlos en minutos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MS<\/span>Marina S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA entiende mi forma de escribir, incre\u00edble.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">GP<\/span>Gonzalo P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis entrevistas quedan documentadas sin esfuerzo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">TL<\/span>Teresa L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cUna pasada para procesos de selecci\u00f3n largos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AV<\/span>Andr\u00e9s V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCero notas manuales, todo autom\u00e1tico y claro.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CM<\/span>Claudia M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl resumen llega antes de levantarme de la silla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RD<\/span>Rub\u00e9n D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhora dedico el tiempo a las personas, no al papeleo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PR<\/span>Paula R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo usa todo mi equipo, no podr\u00edamos volver atr\u00e1s.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">VA<\/span>V\u00edctor A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPlantillas a mi medida desde el primer d\u00eda.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SC<\/span>Silvia C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura matices que a m\u00ed se me escapaban.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JN<\/span>Jorge N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cProfesional, r\u00e1pido y muy intuitivo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LB<\/span>Lorena B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes nunca hab\u00edan sido tan consistentes.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AG<\/span>Adri\u00e1n G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSe acab\u00f3 reescribir lo mismo una y otra vez.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NF<\/span>Natalia F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa mejor inversi\u00f3n para mi consultora.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DT<\/span>Daniel T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEntrevistas resumidas con todo el contexto.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CH<\/span>Carmen H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cF\u00e1cil de configurar y resultados inmediatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PM<\/span>Pablo M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra una ma\u00f1ana entera de trabajo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">ES<\/span>Eva S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA redacta como lo har\u00eda yo. Impresionante.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00d3L<\/span>\u00d3scar L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cDocumentar candidatos ya no es un dolor.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IV<\/span>Irene V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes fieles, sin perder ning\u00fan detalle.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SP<\/span>Sergio P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra horas cada semana, los res\u00famenes salen clavados.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LM<\/span>Laura M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cImprescindible para mis entrevistas, la IA lo capta todo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CR<\/span>Carlos R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa transcripci\u00f3n es perfecta y el informe sale solo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MG<\/span>Marta G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAntes tardaba media hora; ahora segundos. Brutal.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JS<\/span>Javier S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl mejor asistente para reuniones que he probado.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NP<\/span>Nuria P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes precisos y con mi estilo. 10\/10.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DA<\/span>Diego A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo recomiendo a todo mi equipo de selecci\u00f3n.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">EV<\/span>Elena V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cFunciona incre\u00edble en llamadas y presencial.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PC<\/span>Pablo C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe cambi\u00f3 la forma de documentar candidatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SL<\/span>Sara L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cR\u00e1pido, fiable y muy f\u00e1cil de usar.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">HD<\/span>Hugo D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa calidad de los informes es alt\u00edsima.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AT<\/span>Ana T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cYa no tomo notas a mano. Una maravilla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IR<\/span>Iv\u00e1n R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura cada detalle de la entrevista.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LF<\/span>Luc\u00eda F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSencillo y potente, justo lo que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MB<\/span>Marc B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes salen perfectos en un clic.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CN<\/span>Cristina N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhorro de tiempo enorme en cada proceso.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RM<\/span>Ra\u00fal M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa herramienta que no sab\u00eda que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PG<\/span>Patricia G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cTranscribe y resume mejor que nadie.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SH<\/span>Sergio H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cIndispensable para mi d\u00eda a d\u00eda en RRHH.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">BO<\/span>Beatriz O.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cResultados consistentes y muy profesionales.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00c1J<\/span>\u00c1lvaro J.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPas\u00e9 de odiar los informes a tenerlos en minutos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MS<\/span>Marina S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA entiende mi forma de escribir, incre\u00edble.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">GP<\/span>Gonzalo P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis entrevistas quedan documentadas sin esfuerzo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">TL<\/span>Teresa L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cUna pasada para procesos de selecci\u00f3n largos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AV<\/span>Andr\u00e9s V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCero notas manuales, todo autom\u00e1tico y claro.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CM<\/span>Claudia M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl resumen llega antes de levantarme de la silla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RD<\/span>Rub\u00e9n D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhora dedico el tiempo a las personas, no al papeleo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PR<\/span>Paula R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo usa todo mi equipo, no podr\u00edamos volver atr\u00e1s.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">VA<\/span>V\u00edctor A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPlantillas a mi medida desde el primer d\u00eda.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SC<\/span>Silvia C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura matices que a m\u00ed se me escapaban.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JN<\/span>Jorge N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cProfesional, r\u00e1pido y muy intuitivo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LB<\/span>Lorena B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes nunca hab\u00edan sido tan consistentes.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AG<\/span>Adri\u00e1n G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSe acab\u00f3 reescribir lo mismo una y otra vez.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NF<\/span>Natalia F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa mejor inversi\u00f3n para mi consultora.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DT<\/span>Daniel T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEntrevistas resumidas con todo el contexto.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CH<\/span>Carmen H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cF\u00e1cil de configurar y resultados inmediatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PM<\/span>Pablo M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra una ma\u00f1ana entera de trabajo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">ES<\/span>Eva S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA redacta como lo har\u00eda yo. Impresionante.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00d3L<\/span>\u00d3scar L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cDocumentar candidatos ya no es un dolor.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IV<\/span>Irene V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes fieles, sin perder ning\u00fan detalle.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SP<\/span>Sergio P.<\/div><\/div><\/div>\n      <\/div>\n\n        <div class=\"vl-container\">\n\n          <div class=\"vl-text-center\" style=\"margin-bottom:90px;\">\n            <h2 class=\"vl-mb-16\">Consultoras que ya estandarizan sus informes de candidatos<\/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\" pathLength=\"1\" 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 oscura sobre fondo gris claro)\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-cta-section\" style=\"background:#F8F8F8;text-align:center;\">\n   <div class=\"vl-cta-track\">\n    <div class=\"vl-cta-sticky\">\n      <div class=\"vl-container\">\n        <div class=\"vl-cta-pill\" id=\"vl-cta-pill\">\n\n          <h2 class=\"vl-cta-title 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    <\/div><!-- \/vl-cta-sticky -->\n   <\/div><!-- \/vl-cta-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       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 name=\"vl-faq\">\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 name=\"vl-faq\">\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 name=\"vl-faq\">\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 name=\"vl-faq\">\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 name=\"vl-faq\">\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\n        <details>\n          <summary>\u00bfQu\u00e9 debe incluir un informe de candidato?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Un buen informe de candidato suele incluir estas secciones:<\/p>\n            <ul>\n              <li><strong>Datos del candidato:<\/strong> nombre, puesto actual, ubicaci\u00f3n y disponibilidad.<\/li>\n              <li><strong>Trayectoria profesional:<\/strong> los puestos m\u00e1s relevantes para el rol.<\/li>\n              <li><strong>Competencias evaluadas:<\/strong> valoraci\u00f3n de cada competencia clave con evidencias de la entrevista.<\/li>\n              <li><strong>Motivaci\u00f3n por el cambio:<\/strong> por qu\u00e9 se plantea moverse y qu\u00e9 busca.<\/li>\n              <li><strong>Expectativas:<\/strong> salario, modalidad y plazos de incorporaci\u00f3n.<\/li>\n              <li><strong>Conclusiones y recomendaci\u00f3n:<\/strong> el veredicto del consultor.<\/li>\n            <\/ul>\n            <p>Con el generador, cada consultora define sus propias secciones a partir de sus informes reales.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfSe puede crear un informe de candidato con IA a partir de la entrevista?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Voicit <a href=\"https:\/\/voicit.com\/graba-transcribe-y-resume-tus-reuniones-con-ia\/\">graba y transcribe la entrevista<\/a> y rellena tu plantilla con lo que se ha hablado, respetando tu estructura y estilo. Y si el candidato no se coloca, el <a href=\"https:\/\/voicit.com\/buscador-oportunidades-laborales\/\">buscador de oportunidades laborales<\/a> te ayuda a encontrar empresas donde encaja.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfExiste una plantilla de informe de candidato en Word o PDF para descargar?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Las plantillas gen\u00e9ricas descargables rara vez encajan con la forma de trabajar de cada consultora. En lugar de eso, el generador parte de un informe tuyo en PDF y crea una plantilla a tu medida, que se usa directamente en Voicit para documentar cada entrevista.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfEs confidencial subir informes con datos de candidatos?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Voicit es una empresa europea y trata los datos conforme al RGPD. Los documentos que subes se utilizan \u00fanicamente para generar tu plantilla.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfCu\u00e1nto cuesta el generador de plantillas de Voicit?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Est\u00e1 incluido en los planes de Voicit, desde 7 \u20ac\/mes. Puedes empezar gratis, sin compromiso y sin tarjeta de cr\u00e9dito, y ver el detalle en la <a href=\"https:\/\/voicit.com\/pricing\/\">p\u00e1gina de precios<\/a>.<\/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\": \"SoftwareApplication\",\n  \"name\": \"Generador de plantillas de informes de candidatos \u2014 Voicit\",\n  \"url\": \"https:\/\/voicit.com\/plantillas-informes-candidatos\/\",\n  \"description\": \"Sube un informe de candidato de ejemplo y la IA genera la plantilla que replica tu estructura y estilo. Informes de selecci\u00f3n consistentes en cada entrevista, sin configuraci\u00f3n manual.\",\n  \"applicationCategory\": \"BusinessApplication\",\n  \"operatingSystem\": \"Web\",\n  \"inLanguage\": \"es\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"7.00\",\n    \"priceCurrency\": \"EUR\",\n    \"url\": \"https:\/\/voicit.com\/pricing\/\"\n  },\n  \"aggregateRating\": {\n    \"@type\": \"AggregateRating\",\n    \"ratingValue\": \"4.8\",\n    \"ratingCount\": \"350\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Voicit\",\n    \"url\": \"https:\/\/voicit.com\/\"\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   \"@type\": \"Question\",\n   \"name\": \"\u00bfQu\u00e9 debe incluir un informe de candidato?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Datos del candidato, trayectoria profesional, competencias evaluadas con evidencias, motivaci\u00f3n por el cambio, expectativas (salario, modalidad, plazos) y conclusiones con recomendaci\u00f3n del consultor. Con el generador, cada consultora define sus propias secciones a partir de sus informes reales.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfSe puede crear un informe de candidato con IA a partir de la entrevista?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"S\u00ed. Voicit graba y transcribe la entrevista y rellena tu plantilla con lo hablado, respetando tu estructura y estilo.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfExiste una plantilla de informe de candidato en Word o PDF para descargar?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"En lugar de una plantilla gen\u00e9rica descargable, el generador parte de un informe tuyo en PDF y crea una plantilla a tu medida, que se usa directamente en Voicit para documentar cada entrevista.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfEs confidencial subir informes con datos de candidatos?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"S\u00ed. Voicit es una empresa europea y trata los datos conforme al RGPD. Los documentos subidos se utilizan \u00fanicamente para generar la plantilla.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfCu\u00e1nto cuesta el generador de plantillas de Voicit?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Est\u00e1 incluido en los planes de Voicit, desde 7 \u20ac\/mes. Puedes empezar gratis, sin compromiso y sin tarjeta de cr\u00e9dito.\"\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 data-no-optimize=\"1\" data-no-defer=\"1\">\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',fmt:'Formato',len:'Longitud',listo:'Listo',\n          tf:{r:'Redactado',b:'Bullet points',h:'Num\u00e9rico'},tl:{l:'Largo',m:'Medio',s:'Corto'},\n          instr:['Extrae los datos b\u00e1sicos del candidato: nombre, edad, ubicaci\u00f3n, formaci\u00f3n y disponibilidad.',\n                 'Resume la trayectoria del candidato destacando los 3 puestos m\u00e1s relevantes para el rol. Tono profesional.',\n                 'Eval\u00faa las competencias clave del rol en escala 1\u20135 con una breve justificaci\u00f3n de cada puntuaci\u00f3n.',\n                 'Recoge los motivos del candidato para considerar un cambio profesional y su inter\u00e9s en la oferta.',\n                 'Cierra con una recomendaci\u00f3n clara y los pr\u00f3ximos pasos sugeridos.']},\n      en:{gen:'Generating template\u2026',done:'Template draft generated',fmt:'Format',len:'Length',listo:'Done',\n          tf:{r:'Prose',b:'Bullet points',h:'Numeric'},tl:{l:'Long',m:'Medium',s:'Short'},\n          instr:[\"Extract the candidate's basic details: name, age, location, education and availability.\",\n                 \"Summarize the candidate's career, highlighting the 3 most relevant roles for the position. Professional tone.\",\n                 \"Assess the role's key competencies on a 1\u20135 scale with a brief justification for each score.\",\n                 \"Capture the candidate's reasons for considering a career change and their interest in the offer.\",\n                 \"Close with a clear recommendation and the suggested next steps.\"]},\n      fr:{gen:'G\u00e9n\u00e9ration du mod\u00e8le\u2026',done:'Brouillon de mod\u00e8le g\u00e9n\u00e9r\u00e9',fmt:'Format',len:'Longueur',listo:'Termin\u00e9',\n          tf:{r:'R\u00e9dig\u00e9',b:'Puces',h:'Num\u00e9rique'},tl:{l:'Long',m:'Moyen',s:'Court'},\n          instr:['Extrais les donn\u00e9es de base du candidat : nom, \u00e2ge, localisation, formation et disponibilit\u00e9.',\n                 'R\u00e9sume le parcours du candidat en mettant en avant les 3 postes les plus pertinents pour le r\u00f4le. Ton professionnel.',\n                 '\u00c9value les comp\u00e9tences cl\u00e9s du poste sur une \u00e9chelle de 1 \u00e0 5 avec une br\u00e8ve justification de chaque note.',\n                 'Recueille les raisons du candidat d\u2019envisager un changement professionnel et son int\u00e9r\u00eat pour l\u2019offre.',\n                 'Conclus par une recommandation claire et les prochaines \u00e9tapes sugg\u00e9r\u00e9es.']},\n      de:{gen:'Vorlage wird erstellt\u2026',done:'Vorlagenentwurf erstellt',fmt:'Format',len:'L\u00e4nge',listo:'Fertig',\n          tf:{r:'Flie\u00dftext',b:'Aufz\u00e4hlung',h:'Numerisch'},tl:{l:'Lang',m:'Mittel',s:'Kurz'},\n          instr:['Extrahiere die Basisdaten des Kandidaten: Name, Alter, Standort, Ausbildung und Verf\u00fcgbarkeit.',\n                 'Fasse den Werdegang des Kandidaten zusammen und hebe die 3 relevantesten Positionen f\u00fcr die Rolle hervor. Professioneller Ton.',\n                 'Bewerte die Schl\u00fcsselkompetenzen der Rolle auf einer Skala von 1\u20135 mit einer kurzen Begr\u00fcndung je Bewertung.',\n                 'Erfasse die Gr\u00fcnde des Kandidaten f\u00fcr einen beruflichen Wechsel und sein Interesse am Angebot.',\n                 'Schlie\u00dfe mit einer klaren Empfehlung und den vorgeschlagenen n\u00e4chsten Schritten ab.']},\n      it:{gen:'Generazione del modello\u2026',done:'Bozza del modello generata',fmt:'Formato',len:'Lunghezza',listo:'Fatto',\n          tf:{r:'Discorsivo',b:'Elenco puntato',h:'Numerico'},tl:{l:'Lungo',m:'Medio',s:'Corto'},\n          instr:['Estrai i dati di base del candidato: nome, et\u00e0, localit\u00e0, formazione e disponibilit\u00e0.',\n                 'Riassumi il percorso del candidato evidenziando le 3 posizioni pi\u00f9 rilevanti per il ruolo. Tono professionale.',\n                 'Valuta le competenze chiave del ruolo su una scala 1\u20135 con una breve motivazione per ogni punteggio.',\n                 'Raccogli le motivazioni del candidato per considerare un cambio professionale e il suo interesse per l\u2019offerta.',\n                 'Chiudi con una raccomandazione chiara e i prossimi passi suggeriti.']},\n      pt:{gen:'A gerar modelo\u2026',done:'Rascunho do modelo gerado',fmt:'Formato',len:'Comprimento',listo:'Conclu\u00eddo',\n          tf:{r:'Redigido',b:'T\u00f3picos',h:'Num\u00e9rico'},tl:{l:'Longo',m:'M\u00e9dio',s:'Curto'},\n          instr:['Extrai os dados b\u00e1sicos do candidato: nome, idade, localiza\u00e7\u00e3o, forma\u00e7\u00e3o e disponibilidade.',\n                 'Resume o percurso do candidato destacando os 3 cargos mais relevantes para a fun\u00e7\u00e3o. Tom profissional.',\n                 'Avalia as compet\u00eancias-chave da fun\u00e7\u00e3o numa escala de 1 a 5 com uma breve justifica\u00e7\u00e3o de cada pontua\u00e7\u00e3o.',\n                 'Re\u00fane os motivos do candidato para considerar uma mudan\u00e7a profissional e o seu interesse na oferta.',\n                 'Termina com uma recomenda\u00e7\u00e3o clara e os pr\u00f3ximos passos sugeridos.']},\n      ca:{gen:'Generant plantilla\u2026',done:'Esborrany de plantilla generat',fmt:'Format',len:'Longitud',listo:'Fet',\n          tf:{r:'Redactat',b:'Pics',h:'Num\u00e8ric'},tl:{l:'Llarg',m:'Mitj\u00e0',s:'Curt'},\n          instr:['Extreu les dades b\u00e0siques del candidat: nom, edat, ubicaci\u00f3, formaci\u00f3 i disponibilitat.',\n                 'Resumeix la traject\u00f2ria del candidat destacant els 3 llocs m\u00e9s rellevants per al rol. To professional.',\n                 'Avalua les compet\u00e8ncies clau del rol en una escala 1\u20135 amb una breu justificaci\u00f3 de cada puntuaci\u00f3.',\n                 'Recull els motius del candidat per considerar un canvi professional i el seu inter\u00e8s en l\u2019oferta.',\n                 'Tanca amb una recomanaci\u00f3 clara i els propers passos suggerits.']}\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 una secci\u00f3n SOLO en escritorio.\n        \/\/ En tablet\/m\u00f3vil vertical (\u22641024px) lo dejamos todo contra\u00eddo para que la\n        \/\/ ilustraci\u00f3n quepa entera; el usuario abre la secci\u00f3n que quiera.\n        if (entry.target.classList.contains('vl-mk-editor') && !window.matchMedia('(max-width: 1024px)').matches) {\n          setTimeout(() => {\n            const sections = entry.target.querySelectorAll('[data-vl-section]');\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\">${VLI18N.fmt}<\/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=\"${VLI18N.tf.r}\">\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=\"${VLI18N.tf.b}\">\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=\"${VLI18N.tf.h}\">\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\">${VLI18N.len}<\/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=\"${VLI18N.tl.l}\">\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=\"${VLI18N.tl.m}\">\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=\"${VLI18N.tl.s}\">\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      <button type=\"button\" class=\"vl-mk-editor-done\" data-vl-done>${VLI18N.listo}<\/button>\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 k = section.dataset.instrKey;\n      const instructions = (VLI18N.instr && k != null && VLI18N.instr[k] != null) ? VLI18N.instr[k] : (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        editor.classList.add('vl-mk-editor--solo');   \/\/ m\u00f3vil: solo se muestra la secci\u00f3n abierta\n      }, 420);\n    } else {\n      \/\/ Nada estaba abierto \u2192 abrir directamente\n      section.classList.add('vl-mk-editor-section--open');\n      editor.classList.add('vl-mk-editor--solo');     \/\/ m\u00f3vil: solo se muestra la secci\u00f3n abierta\n    }\n  }\n\n  \/\/ Cerrar una secci\u00f3n\n  function vlEditorCloseSection(section) {\n    section.classList.remove('vl-mk-editor-section--open');\n    const editor = section.closest('.vl-mk-editor');\n    if (editor) editor.classList.remove('vl-mk-editor--solo');   \/\/ vuelven a verse todas las secciones\n  }\n\n  \/\/ Auto-scroll a un paso concreto dentro del scroll congelado de la secci\u00f3n \"3 pasos\"\n  function vlGoToStep(idx, delay) {\n    var track = document.querySelector('.vl-ssteps-track');\n    if (!track) return;\n    var nSteps = document.querySelectorAll('.vl-sstep').length || 3;\n    setTimeout(function () {\n      var absTop = track.getBoundingClientRect().top + window.scrollY;\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) return;\n      var target = absTop + scrollable * ((idx + 0.5) \/ nSteps);\n      window.scrollTo({ top: Math.round(target), behavior: 'smooth' });\n    }, delay || 0);\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    \/\/ 1b) Click en \"Listo\" (m\u00f3vil) \u2192 contraer la secci\u00f3n y mostrar de nuevo todas\n    const doneBtn = e.target.closest('[data-vl-done]');\n    if (doneBtn) {\n      const sec = doneBtn.closest('[data-vl-section]');\n      if (sec) vlEditorCloseSection(sec);\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      \/\/ Auto-avance al Paso 2 tras subir el informe\n      vlGoToStep(1, 700);\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      \/\/ Auto-avance al Paso 3 al confirmar la generaci\u00f3n\n      vlGoToStep(2, 1000);\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          <span class=\"vl-orb vl-orb--avatar\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\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      \/\/ El orbe se crea din\u00e1micamente \u2192 hay que inicializarlo (igual que los avatares est\u00e1ticos)\n      try { if (window.vlInitOrb) window.vlInitOrb(row.querySelector('.vl-orb')); } catch (err) {}\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      \/\/ M\u00f3vil\/tablet: sin scroll fijado (las rese\u00f1as van en flujo normal, lo gestiona el CSS)\n      if (window.matchMedia('(max-width: 1024px)').matches) return;\n      const rect = track.getBoundingClientRect();\n      const trackHeight = track.offsetHeight - window.innerHeight;\n      if (trackHeight <= 0) return;\n      let progress = Math.max(0, Math.min(1, -rect.top \/ trackHeight));\n\n      const N = cards.length;\n      const SEG = Math.max(1, N - 1);          \/\/ n\u00ba de transiciones (una por card que entra)\n      const pos = progress * SEG;              \/\/ 0..N-1\n      const baseIdx = Math.min(N - 1, Math.floor(pos));   \/\/ card ya asentada arriba\n      const local = pos - baseIdx;             \/\/ 0..1 dentro de la transici\u00f3n actual\n      const incomingIdx = baseIdx + 1;         \/\/ card que se est\u00e1 acercando (puede no existir)\n      const SNAP = 0.82;                       \/\/ a partir de aqu\u00ed se coloca encima (m\u00e1s r\u00e1pido)\n\n      cards.forEach((card, idx) => {\n        \/\/ Reset: las clases gestionan las asentadas; la entrante usa transform inline (sigue al scroll)\n        card.style.transform = '';\n        card.style.transition = '';\n        card.classList.remove('is-behind-1', 'is-behind-2', 'is-behind-3');\n\n        if (idx <= baseIdx) {\n          \/\/ Cards ya colocadas (la de arriba + las del fondo apiladas)\n          card.classList.add('is-visible');\n          const depth = baseIdx - 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 if (idx === incomingIdx) {\n          \/\/ Card ENTRANTE: se acerca poco a poco con cada input de scroll\u2026\n          card.classList.remove('is-visible');\n          if (local < SNAP) {\n            const t = local \/ SNAP;                          \/\/ 0..1\n            const ty = 120 - t * (120 - 12);                 \/\/ 120vh \u2192 12vh (se va asomando por abajo)\n            const sc = 0.94 + t * 0.045;                     \/\/ 0.940 \u2192 0.985\n            card.style.transition = 'transform 0.14s linear';\n            card.style.transform = 'translateY(' + ty.toFixed(2) + 'vh) scale(' + sc.toFixed(3) + ')';\n          } else {\n            \/\/ \u2026y en el \u00faltimo tramo se coloca ENCIMA con una animaci\u00f3n algo m\u00e1s r\u00e1pida\n            card.style.transition = 'transform 0.42s cubic-bezier(0.22, 1, 0.36, 1)';\n            card.style.transform = 'translateY(0) scale(1)';\n          }\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 data-no-optimize=\"1\" data-no-defer=\"1\">\n(function(){\n  'use strict';\n  \/\/ \u2500\u2500 Hero: bot\u00f3n \"Generar\" \u2192 transici\u00f3n a amarillo \"\u2713 Generado\" \u2500\u2500\n  var gen = document.querySelector('[data-vl-gen]');\n  if (gen) {\n    gen.addEventListener('click', function(){\n      if (gen.classList.contains('is-done') || gen.classList.contains('is-generating')) return;\n      gen.classList.add('is-generating');\n      gen.textContent = 'Generando\u2026';\n      setTimeout(function(){\n        gen.classList.remove('is-generating');\n        gen.classList.add('is-done');\n        gen.innerHTML = '<span class=\"vl-gen-tick\">\u2713<\/span> Generado';\n      }, 750);\n    });\n  }\n\n  \/\/ \u2500\u2500 Hero: mini-men\u00fas de Formato \/ Longitud por secci\u00f3n (selecci\u00f3n persistente) \u2500\u2500\n  var CFG = {\n    formato:  { order: ['redactado','bullets','hashtag'], label: { redactado: \"Redactado\", bullets: \"Bullet points\", hashtag: \"Num\u00e9rico\" }, svg: { 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>\", bullets: \"<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>\", hashtag: \"<span style=\\\"font-weight:800;font-size:14px;line-height:1;\\\">#<\/span>\" } },\n    longitud: { order: ['corta','media','larga'],          label: { corta: \"Corto\", media: \"Medio\", larga: \"Largo\" }, svg: { 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>\", 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>\", 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>\" } }\n  };\n\n  function closeMenus(){\n    [].slice.call(document.querySelectorAll('.vl-mk-cfg-ico.is-open')).forEach(function(b){\n      b.classList.remove('is-open');\n      var li = b.closest('li'); if (li){ li.style.zIndex=''; li.style.position=''; }\n      var m = b.querySelector('.vl-mk-cfg-menu'); if (m) m.parentNode.removeChild(m);\n    });\n  }\n\n  function openMenu(btn){\n    var type = btn.getAttribute('data-vl-cfgbtn');\n    var conf = CFG[type]; if (!conf) return;\n    var cur = btn.getAttribute('data-vl-val');\n    var menu = document.createElement('div');\n    menu.className = 'vl-mk-cfg-menu';\n    conf.order.forEach(function(val){\n      var opt = document.createElement('button');\n      opt.type = 'button';\n      opt.className = 'vl-mk-cfg-opt' + (val===cur ? ' is-active' : '');\n      opt.setAttribute('data-vl-pick', val);\n      opt.innerHTML = '<span class=\"vl-mk-cfg-opt-ico\">' + conf.svg[val] + '<\/span>' + conf.label[val];\n      menu.appendChild(opt);\n    });\n    var r = btn.getBoundingClientRect();\n    if (r.bottom + 170 > (window.innerHeight || 800)) menu.classList.add('vl-up');\n    btn.appendChild(menu);\n    btn.classList.add('is-open');\n    var li = btn.closest('li'); if (li){ li.style.position='relative'; li.style.zIndex='50'; }\n  }\n\n  document.addEventListener('click', function(e){\n    var opt = e.target.closest('.vl-mk-cfg-opt');\n    if (opt){\n      var b = opt.closest('.vl-mk-cfg-ico');\n      var type = b.getAttribute('data-vl-cfgbtn');\n      var val = opt.getAttribute('data-vl-pick');\n      var conf = CFG[type];\n      b.setAttribute('data-vl-val', val);\n      b.setAttribute('title', (type==='formato' ? 'Formato: ' : 'Longitud: ') + conf.label[val].toLowerCase());\n      var glyph = b.querySelector('.vl-mk-cfg-glyph');\n      if (glyph) glyph.innerHTML = conf.svg[val];\n      closeMenus();\n      e.stopPropagation();\n      return;\n    }\n    var btn = e.target.closest('.vl-mk-cfg-ico');\n    if (btn){\n      var wasOpen = btn.classList.contains('is-open');\n      closeMenus();\n      if (!wasOpen) openMenu(btn);\n      e.stopPropagation();\n      return;\n    }\n    closeMenus();\n  });\n})();\n<\/script>\n\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\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  var dtitle = document.querySelector('.vl-ssteps-dtitle');\n  var progress = document.querySelector('.vl-ssteps-progress');\n\n  function isMobile(){ return window.matchMedia('(max-width: 900px)').matches; }\n\n  \/\/ El t\u00edtulo (y las barritas de progreso) arrancan transparentes y se revelan con un fundido + ligero ascenso\n  \/\/ NADA M\u00c1S entrar el bloque por la parte baja: alcanzan el 100% mucho antes de que la secci\u00f3n quede fija.\n  function revealTitle(rectTop){\n    if (!dtitle) return;\n    if (window.matchMedia('(max-width: 1024px)').matches) {\n      dtitle.style.opacity = ''; dtitle.style.transform = '';\n      if (progress) { progress.style.opacity = ''; progress.style.transform = ''; }\n      return;\n    }\n    var vh = window.innerHeight || 800;\n    var start = vh * 0.88;                 \/\/ empieza a revelarse al asomar por abajo\n    var end   = vh * 0.60;                 \/\/ 100% visible mucho antes de fijarse arriba\n    var o = (start - rectTop) \/ (start - end);\n    o = Math.max(0, Math.min(1, o));\n    var ty = ((1 - o) * 10).toFixed(1);\n    dtitle.style.opacity = o.toFixed(3);\n    dtitle.style.transform = 'translateY(' + ty + 'px)';\n    if (progress) { progress.style.opacity = o.toFixed(3); progress.style.transform = 'translateY(' + ty + 'px)'; }\n  }\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 isStacked(){ return window.matchMedia('(max-width: 1024px)').matches || window.matchMedia('(hover: none) and (pointer: coarse)').matches; }\n  \/\/ M\u00f3vil\/tablet: todos los pasos visibles, apilados (sin scroll fijado)\n  function applyStacked(){\n    for (var s = 0; s < steps.length; s++){ steps[s].classList.add('is-active'); fireMockup(s); }\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 (isStacked()) { applyStacked(); return; }   \/\/ m\u00f3vil: sin scroll-jack, todo apilado y visible\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    var pos = prog * steps.length;                \/\/ 0..nSteps\n    var curr = Math.floor(pos);\n    var local = pos - curr;                       \/\/ 0..1 dentro del paso actual\n    activate(curr);\n    \/\/ Feedback continuo: la barra del paso actual se rellena seg\u00fan el scroll; las anteriores quedan llenas\n    for (var k = 0; k < dots.length; k++) {\n      var fill = (k < curr) ? 1 : (k === curr ? local : 0);\n      dots[k].style.setProperty('--fill', fill.toFixed(3));\n    }\n    revealTitle(rect.top);\n  }\n\n  if (isStacked()) applyStacked(); else activate(0);\n\n  \/\/ Barras de progreso clicables \u2192 llevan a su paso\n  dots.forEach(function (dot, i) {\n    dot.addEventListener('click', function () {\n      var absTop = track.getBoundingClientRect().top + window.scrollY;\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) return;\n      var target = absTop + scrollable * ((i + 0.5) \/ steps.length);\n      window.scrollTo({ top: Math.round(target), behavior: 'smooth' });\n    });\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', function () { 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 revelado natural al entrar en pantalla (sin scroll fijado)\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 data-no-optimize=\"1\" data-no-defer=\"1\">\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  var arrowPath = section.querySelector('.vl-compare-arrow svg path');\n  var afterCard = section.querySelector('.vl-compare-card--after');\n  var items = [].slice.call(section.querySelectorAll('.vl-compare-card--after .vl-compare-list li'));\n  var mq = window.matchMedia('(max-width: 1024px)');\n  function rng(p, a, b){ return Math.max(0, Math.min(1, (p - a) \/ (b - a))); }\n\n  function clearInline(){\n    if (arrowPath) arrowPath.style.strokeDashoffset = '';\n    if (afterCard) { afterCard.style.opacity = ''; afterCard.style.transform = ''; }\n    items.forEach(function (it){ it.style.opacity = ''; it.style.transform = ''; });\n  }\n  function revealInline(){\n    if (arrowPath) arrowPath.style.strokeDashoffset = '0';\n    if (afterCard) { afterCard.style.opacity = '1'; afterCard.style.transform = 'none'; }\n    items.forEach(function (it){ it.style.opacity = '1'; it.style.transform = 'none'; });\n  }\n\n  \/\/ ESCRITORIO: animaci\u00f3n dirigida por el scroll fijado (estilos inline).\n  function update(){\n    if (mq.matches || !track) return;   \/\/ m\u00f3vil \u2192 lo gestiona el revelado por IO\n    try {\n      var rect = track.getBoundingClientRect();\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) { revealInline(); return; }\n      var p = Math.max(0, Math.min(1, (-rect.top) \/ scrollable));\n      if (arrowPath) arrowPath.style.strokeDashoffset = (1 - rng(p, 0.10, 0.40)).toFixed(3);\n      if (afterCard) {\n        var ca = rng(p, 0.32, 0.54);\n        afterCard.style.opacity = ca.toFixed(3);\n        afterCard.style.transform = 'translateX(' + ((1 - ca) * -42).toFixed(1) + 'px)';\n      }\n      var starts = [0.56, 0.70, 0.84];\n      for (var i = 0; i < items.length; i++){\n        var s = starts[i] != null ? starts[i] : (0.56 + i * 0.14);\n        var f = rng(p, s, s + 0.13);\n        items[i].style.opacity = f.toFixed(3);\n        items[i].style.transform = 'translateY(' + ((1 - f) * 9).toFixed(1) + 'px)';\n      }\n    } catch (e) { revealInline(); }\n  }\n\n  \/\/ M\u00d3VIL: revelado natural al entrar en pantalla (clases CSS + transiciones).\n  var ioStarted = false;\n  function startIO(){\n    if (ioStarted) return; ioStarted = true;\n    var fire = function(){ section.classList.add('is-live'); };\n    if ('IntersectionObserver' in window) {\n      var io = new IntersectionObserver(function (es) {\n        es.forEach(function (en) { if (en.isIntersecting) { fire(); io.disconnect(); } });\n      }, { threshold: 0.25 });\n      io.observe(section);\n    } else { fire(); }\n    setTimeout(fire, 12000);   \/\/ red de seguridad\n  }\n\n  function setMode(){\n    if (mq.matches) {                 \/\/ m\u00f3vil: revelado por IO + CSS\n      clearInline();\n      section.classList.add('vl-cmp-prep');\n      startIO();\n    } else {                          \/\/ escritorio: scroll fijado\n      section.classList.remove('vl-cmp-prep', 'is-live');\n      update();\n    }\n  }\n\n  window.addEventListener('scroll', update, { passive: true });\n  window.addEventListener('resize', setMode, { passive: true });\n  if (mq.addEventListener) mq.addEventListener('change', setMode);\n  setMode();\n  \/\/ Red de seguridad para escritorio: mantiene la sincron\u00eda aunque fallen los eventos de scroll.\n  var ticks = 0, iv = setInterval(function(){ if (!mq.matches) update(); if (++ticks > 120) clearInterval(iv); }, 250);\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     CASOS DE USO \u2014 CONSTELACI\u00d3N: salida desde el centro al hacer scroll\n     + flotaci\u00f3n continua de los nodos con las l\u00edneas sigui\u00e9ndolos\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 data-no-optimize=\"1\" data-no-defer=\"1\">\n\/* Puntos de fondo que se iluminan alrededor del cursor (hero, pain, casos de uso) \u2014 independiente *\/\n(function () {\n  'use strict';\n  if (window.matchMedia('(hover: none)').matches) return;\n  [].slice.call(document.querySelectorAll('.vl-dots')).forEach(function (sec) {\n    sec.addEventListener('pointermove', function (e) {\n      var r = sec.getBoundingClientRect();\n      sec.style.setProperty('--cx', (e.clientX - r.left) + 'px');\n      sec.style.setProperty('--cy', (e.clientY - r.top) + 'px');\n      sec.classList.add('is-lit');\n    }, { passive: true });\n    sec.addEventListener('pointerleave', function () { sec.classList.remove('is-lit'); });\n  });\n})();\n\/* Mensaje de la tira de proceso: aparece SOLO al pasar el rat\u00f3n, justo debajo de la etapa\n   enfocada y alineado con ella en X (la tarjeta se mueve siguiendo al rat\u00f3n entre etapas). *\/\n(function () {\n  'use strict';\n  var cap = document.getElementById('vl-chev-cap');\n  var flow = document.querySelector('.vl-chevflow');\n  if (!cap || !flow) return;\n  var chevs = [].slice.call(flow.querySelectorAll('.vl-chev'));\n  function isStacked() { return window.innerWidth <= 768; }\n  function focus(ch) {\n    chevs.forEach(function (c) { c.classList.toggle('vl-on', c === ch); });\n    flow.classList.add('vl-has-focus');\n    cap.textContent = ch.getAttribute('data-desc') || '';\n    if (isStacked()) { cap.style.left = ''; cap.classList.add('is-on'); return; }\n    var fw = flow.clientWidth;\n    var cw = cap.offsetWidth;\n    var center = ch.offsetLeft + ch.offsetWidth \/ 2;\n    var left = Math.max(0, Math.min(center - cw \/ 2, fw - cw));\n    cap.style.left = left + 'px';\n    cap.classList.add('is-on');\n  }\n  function clear() {\n    chevs.forEach(function (c) { c.classList.remove('vl-on'); });\n    flow.classList.remove('vl-has-focus');\n    cap.classList.remove('is-on');\n  }\n  chevs.forEach(function (ch) {\n    ch.addEventListener('pointerenter', function () { focus(ch); });\n  });\n  flow.addEventListener('pointerleave', clear);\n})();\n(function () {\n  'use strict';\n  var cst = document.querySelector('.vl-constellation');\n  if (!cst) return;\n  var svg = cst.querySelector('.vl-cst-svg');\n  var nodes = [].slice.call(cst.querySelectorAll('.vl-cst-node'));\n  if (!svg || nodes.length < 2) return;\n  var SVGNS = 'http:\/\/www.w3.org\/2000\/svg';\n  var edges = [[0,1],[1,2],[2,3],[3,4],[4,5],[5,0],[1,4],[0,3]];\n  var lines = [];\n  \/\/ fase de flotaci\u00f3n distinta por nodo \u2192 movimiento org\u00e1nico\n  var phase = nodes.map(function (_, i) { return i * 1.9; });\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function isMobile(){ return window.matchMedia('(max-width: 1024px)').matches; }\n\n  function buildLines(){\n    while (svg.firstChild) svg.removeChild(svg.firstChild);\n    lines = [];\n    if (isMobile()) return;\n    var r = cst.getBoundingClientRect();\n    svg.setAttribute('viewBox', '0 0 ' + r.width + ' ' + r.height);\n    edges.forEach(function () {\n      var ln = document.createElementNS(SVGNS, 'line');\n      ln.setAttribute('class', 'vl-cst-line');\n      svg.appendChild(ln);\n      lines.push(ln);\n    });\n  }\n\n  function dotCenter(n, r){\n    var d = n.querySelector('.vl-cst-dot').getBoundingClientRect();\n    return { x: d.left - r.left + d.width \/ 2, y: d.top - r.top + d.height \/ 2 };\n  }\n\n  function updateLines(){\n    if (isMobile() || !lines.length) return;\n    var r = cst.getBoundingClientRect();\n    edges.forEach(function (e, k) {\n      var a = dotCenter(nodes[e[0]], r), b = dotCenter(nodes[e[1]], r);\n      var ln = lines[k];\n      ln.setAttribute('x1', a.x); ln.setAttribute('y1', a.y);\n      ln.setAttribute('x2', b.x); ln.setAttribute('y2', b.y);\n    });\n  }\n\n  var running = false, rafId = null, t0 = null;\n\n  function frame(ts){\n    if (!running) return;\n    if (t0 == null) t0 = ts;\n    var time = (ts - t0) \/ 1000;\n    var r = cst.getBoundingClientRect();\n    var vh = window.innerHeight || 800;\n    \/\/ progreso de scroll: 0 al entrar por abajo \u2192 1 cuando la secci\u00f3n sube ~60% del viewport\n    var prog = (vh - r.top) \/ (vh * 0.6);\n    prog = Math.max(0, Math.min(1, prog));\n    var eased = 1 - Math.pow(1 - prog, 3);   \/\/ easeOutCubic\n    var cx = r.width \/ 2, cy = r.height \/ 2;\n    for (var i = 0; i < nodes.length; i++) {\n      var n = nodes[i];\n      var fx = parseFloat(n.style.getPropertyValue('--x')) \/ 100 * r.width;\n      var fy = parseFloat(n.style.getPropertyValue('--y')) \/ 100 * r.height;\n      \/\/ del centro (prog 0) a su posici\u00f3n final (prog 1)\n      var px = cx + (fx - cx) * eased;\n      var py = cy + (fy - cy) * eased;\n      \/\/ flotaci\u00f3n sutil y continua\n      var amp = 6;\n      var dx = Math.sin(time * 0.55 + phase[i]) * amp;\n      var dy = Math.cos(time * 0.47 + phase[i] * 1.3) * amp;\n      var s = 0.62 + 0.38 * eased;\n      var tx = (px - fx) + dx;\n      var ty = (py - fy) + dy;\n      n.style.transform = 'translate(-50%,-50%) translate(' + tx.toFixed(1) + 'px,' + ty.toFixed(1) + 'px) scale(' + s.toFixed(3) + ')';\n    }\n    updateLines();\n    rafId = requestAnimationFrame(frame);\n  }\n\n  function start(){\n    if (running || isMobile()) return;\n    running = true; t0 = null;\n    rafId = requestAnimationFrame(frame);\n  }\n  function stop(){ running = false; if (rafId) cancelAnimationFrame(rafId); rafId = null; }\n\n  function settleStatic(){\n    \/\/ reduced-motion o sin animaci\u00f3n: nodos en su sitio y l\u00edneas una vez\n    nodes.forEach(function (n) { n.style.transform = 'translate(-50%,-50%) scale(1)'; });\n    buildLines();\n    requestAnimationFrame(updateLines);\n  }\n\n  buildLines();\n\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (en) {\n      if (en.isIntersecting) {\n        cst.classList.add('is-drawn');\n        if (reduce || isMobile()) { settleStatic(); }\n        else { start(); }\n      } else {\n        stop();\n      }\n    });\n  }, { threshold: 0.05 });\n  io.observe(cst);\n\n  var rt;\n  window.addEventListener('resize', function () {\n    clearTimeout(rt);\n    rt = setTimeout(function () {\n      stop();\n      if (isMobile()) {\n        nodes.forEach(function (n) { n.style.transform = ''; });   \/\/ que mande el CSS de m\u00f3vil\n        buildLines();\n      } else {\n        buildLines();\n        if (cst.classList.contains('is-drawn')) {\n          if (reduce) settleStatic(); else start();\n        }\n      }\n    }, 200);\n  }, { passive: true });\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     CTA FINAL \u2014 la p\u00edldora \"se asienta\" (de un poco m\u00e1s grande a su tama\u00f1o)\n     seg\u00fan se acerca al centro del viewport 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<!-- El CTA \"Comenzar gratis\" del header m\u00f3vil ahora es GLOBAL (Code Snippets id 25), ya no se inyecta por 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     ORBE animado del Hero (sustituye al engranaje) \u2014 canvas ligero, en bucle\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 data-no-optimize=\"1\" data-no-defer=\"1\">\n(function(){\n  'use strict';\n  var SIZE = 72, K = SIZE \/ 640;\n\n  function initOrb(wrap){\n  var mainC = wrap.querySelector('[data-orb-main]');\n  var glowC = wrap.querySelector('[data-orb-glow]');\n  if (!mainC || !glowC || !mainC.getContext) return;\n  var mouse = { x:0, y:0, influence:0 }, sm = { x:0, y:0, influence:0 };\n\n  document.addEventListener('mousemove', function(e){\n    var rect = wrap.getBoundingClientRect();\n    var cx = rect.left + rect.width\/2, cy = rect.top + rect.height\/2;\n    var scale = SIZE \/ (rect.width || 22);\n    mouse.x = (e.clientX - cx) * scale;\n    mouse.y = (e.clientY - cy) * scale;\n    var dist = Math.sqrt((e.clientX-cx)*(e.clientX-cx) + (e.clientY-cy)*(e.clientY-cy));\n    mouse.influence = Math.max(0, 1 - dist\/40);   \/\/ solo reacciona si el rat\u00f3n est\u00e1 MUY cerca del orbe (~40px)\n  }, { passive: true });\n  document.addEventListener('mouseleave', function(){ mouse.influence = 0; });\n\n  function Orb(canvas){\n    this.ctx = canvas.getContext('2d');\n    canvas.width = SIZE; canvas.height = SIZE;\n    this.center = SIZE\/2; this.radius = SIZE\/2; this.time = 0;\n    this.blobs = [\n      { color:[231,254,21],  opacity:1.00, sx:1.00, sy:0.80, px:0,    py:0.5, orbit:190*K, baseR:420*K },\n      { color:[128,141,12],  opacity:0.90, sx:0.85, sy:1.05, px:3.14, py:4.2, orbit:200*K, baseR:380*K },\n      { color:[255,225,76],  opacity:0.85, sx:1.10, sy:0.75, px:1.5,  py:0.8, orbit:185*K, baseR:400*K },\n      { color:[205,226,19],  opacity:0.80, sx:0.80, sy:1.15, px:4.8,  py:2.2, orbit:170*K, baseR:370*K },\n      { color:[255,237,148], opacity:0.55, sx:0.65, sy:0.55, px:2.5,  py:5.5, orbit:140*K, baseR:400*K }\n    ];\n    for (var i=0;i<this.blobs.length;i++){ this.blobs[i].r=this.blobs[i].baseR; this.blobs[i].x=this.center; this.blobs[i].y=this.center; }\n  }\n  Orb.prototype.update = function(dt, mi){\n    this.time += dt;\n    \/\/ Los colores se mueven por la SUPERFICIE de la esfera (3D real):\n    \/\/ cada mancha vive en la esfera (longitud que rota + latitud que oscila) y se\n    \/\/ proyecta a 2D. La profundidad (z) modula su tama\u00f1o y opacidad \u2192 la cara\n    \/\/ oculta se aten\u00faa y la frontal brilla, como una esfera girando.\n    \/\/ El rat\u00f3n cerca solo ACELERA el giro (nada se desplaza en X\/Y).\n    this.spin = (this.spin || 0) + dt * (0.25 + mi.influence * 2.2);\n    var R = this.radius * 0.62;                                  \/\/ radio de la esfera interior\n    for (var i=0;i<this.blobs.length;i++){\n      var b=this.blobs[i], t=this.time;\n      var th = b.px + t * b.sx * 0.35 + this.spin;               \/\/ longitud (gira)\n      var ph = b.py + Math.sin(t * b.sy * 0.45 + b.px) * 0.9;    \/\/ latitud (oscila)\n      var sp = Math.sin(ph), cp = Math.cos(ph);\n      var x = Math.cos(th) * sp, y = cp, z = Math.sin(th) * sp;  \/\/ punto sobre la esfera unidad\n      var depth = (z + 1) \/ 2;                                    \/\/ 0 = detr\u00e1s, 1 = de frente\n      b.x = this.center + x * R;\n      b.y = this.center + y * R;\n      b.r = b.baseR * (0.55 + 0.5 * depth);\n      b.alpha = 0.30 + 0.70 * depth;\n    }\n  };\n  Orb.prototype.render = function(){\n    var ctx=this.ctx, s=SIZE;\n    ctx.clearRect(0,0,s,s);\n    ctx.save();\n    ctx.beginPath(); ctx.arc(this.center,this.center,this.radius,0,Math.PI*2); ctx.clip();\n    ctx.fillStyle='#FDFFE8'; ctx.fillRect(0,0,s,s);\n    for (var i=0;i<this.blobs.length;i++){\n      var b=this.blobs[i], c=b.color, a=b.opacity * (b.alpha == null ? 1 : b.alpha);\n      var grad=ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,Math.max(0.1,b.r));\n      grad.addColorStop(0,    'rgba('+c[0]+','+c[1]+','+c[2]+','+a+')');\n      grad.addColorStop(0.2,  'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.82)+')');\n      grad.addColorStop(0.45, 'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.45)+')');\n      grad.addColorStop(0.7,  'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.15)+')');\n      grad.addColorStop(1,    'rgba('+c[0]+','+c[1]+','+c[2]+',0)');\n      ctx.fillStyle=grad; ctx.fillRect(0,0,s,s);\n    }\n    ctx.restore();\n  };\n\n  var main, glow;\n  try { main = new Orb(mainC); glow = new Orb(glowC); } catch(e){ return; }\n  for (var i=0;i<glow.blobs.length;i++){ var m=main.blobs[i], g=glow.blobs[i]; g.px=m.px; g.py=m.py; g.sx=m.sx; g.sy=m.sy; g.orbit=m.orbit; }\n\n  var last = performance.now(), running = false, rafId = 0;\n  function animate(now){\n    if (!running) return;\n    try {\n      var dt = Math.min(0.05, (now-last)\/1000); last = now;\n      var lerp = 1 - Math.pow(0.15, dt);\n      sm.x += (mouse.x-sm.x)*lerp; sm.y += (mouse.y-sm.y)*lerp; sm.influence += (mouse.influence-sm.influence)*lerp;\n      main.update(dt, sm); glow.update(dt, sm); main.render(); glow.render();\n    } catch(e){ running = false; return; }\n    rafId = requestAnimationFrame(animate);\n  }\n  function start(){ if (!running){ running = true; last = performance.now(); rafId = requestAnimationFrame(animate); } }\n  function stop(){ running = false; if (rafId) cancelAnimationFrame(rafId); }\n  if ('IntersectionObserver' in window){\n    new IntersectionObserver(function(es){ es.forEach(function(en){ en.isIntersecting ? start() : stop(); }); }, { threshold: 0 }).observe(wrap);\n  }\n  start();\n  }\n\n  var _orbs = document.querySelectorAll('.vl-orb');\n  for (var _oi = 0; _oi < _orbs.length; _oi++) initOrb(_orbs[_oi]);\n  \/\/ Expuesto para orbes creados din\u00e1micamente (p. ej. el avatar de la burbuja \"Borrador generado\")\n  window.vlInitOrb = function (el){ if (el) initOrb(el); };\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     CTA FINAL \u2014 la p\u00edldora \"se asienta\"\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 data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-cta-section');\n  if (!section) return;\n  var track = section.querySelector('.vl-cta-track');\n  var pill = document.getElementById('vl-cta-pill');\n  if (!track || !pill) return;\n  var title = pill.querySelector('h2');\n  var subtitle = pill.querySelector('p');\n  var buttons = pill.querySelector('div');   \/\/ contenedor de los botones\n  pill.classList.add('is-shown');            \/\/ visible (anula el opacity:0 de entrada)\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function rng(p, a, b){ return Math.max(0, Math.min(1, (p - a) \/ (b - a))); }\n\n  \/\/ ESTADO COMPLETO (seguro): p\u00edldora negra, t\u00edtulo blanco a tama\u00f1o normal, subt\u00edtulo y botones visibles.\n  function formFull(){\n    pill.style.backgroundColor = '#161616';\n    pill.style.boxShadow = '0 26px 64px -28px rgba(0,0,0,0.5)';\n    if (title) { title.style.opacity = '1'; title.style.transform = 'none'; title.style.setProperty('color', '#FFFFFF', 'important'); }\n    if (subtitle) { subtitle.style.opacity = '1'; subtitle.style.transform = 'none'; }\n    if (buttons) { buttons.style.opacity = '1'; buttons.style.transform = 'none'; }\n  }\n\n  if (reduce) { formFull(); return; }\n\n  function update(){\n    try {\n      var rect = track.getBoundingClientRect();\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) { formFull(); return; }     \/\/ m\u00f3vil\/tablet (sin scroll-jack)\n      var p = Math.max(0, Math.min(1, (-rect.top) \/ scrollable));\n      var vh = window.innerHeight || 800;\n      var ent = Math.max(0, Math.min(1, 1 - rect.top \/ vh));   \/\/ ENTRADA de la secci\u00f3n (0 al asomar \u2192 1 al fijarse)\n\n      \/\/ 1) FRASE: GRANDE desde el inicio; APARECE (fade) seg\u00fan ENTRA la secci\u00f3n (mucho antes, sin tanto blanco)\n      \/\/    y luego se comprime para colocarse dentro de la p\u00edldora. (Sin zoom de escala.)\n      if (title) {\n        title.style.opacity = rng(ent, 0.40, 0.62).toFixed(3);\n        var shrink = rng(p, 0.18, 0.52);\n        var ts = 1.28 - shrink * 0.28;                   \/\/ 1.28 (grande) \u2192 1.0 (cabe en la p\u00edldora)\n        title.style.transform = 'scale(' + ts.toFixed(3) + ')';\n      }\n      \/\/ 2) Se FORMA la p\u00edldora (gris del fondo \u2192 negra)\n      var fq = rng(p, 0.22, 0.52);\n      var L = Math.round(248 - fq * 226);              \/\/ 248 (gris) \u2192 22 (negro)\n      pill.style.backgroundColor = 'rgb(' + L + ',' + L + ',' + L + ')';\n      pill.style.boxShadow = fq > 0.04 ? '0 26px 64px -28px rgba(0,0,0,' + (0.5 * fq).toFixed(2) + ')' : 'none';\n      \/\/ Color del t\u00edtulo: SIEMPRE alto contraste (negro sobre claro, blanco sobre oscuro)\n      if (title) title.style.setProperty('color', L > 140 ? '#161616' : '#FFFFFF', 'important');\n      \/\/ 3) Subt\u00edtulo + botones: con la p\u00edldora ya oscura\n      var rev = rng(p, 0.56, 0.82);\n      if (subtitle) { subtitle.style.opacity = rev.toFixed(3); subtitle.style.transform = 'translateY(' + ((1 - rev) * 8).toFixed(1) + 'px)'; }\n      if (buttons) { buttons.style.opacity = rev.toFixed(3); buttons.style.transform = 'translateY(' + ((1 - rev) * 8).toFixed(1) + 'px)'; }\n    } catch (e) { formFull(); }\n  }\n\n  window.addEventListener('scroll', update, { passive: true });\n  window.addEventListener('resize', update, { passive: true });\n  \/\/ Red de seguridad: intervalo que mantiene la sincron\u00eda aunque fallen los eventos de scroll.\n  var ticks = 0, iv = setInterval(function(){ update(); if (++ticks > 140) clearInterval(iv); }, 250);\n  update();\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     PAIN CARDS \u2014 spotlight que sigue al cursor + tilt 3D + contadores\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 data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-pain-section');\n  if (!section) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var noHover = window.matchMedia('(hover: none)').matches;\n  var cards = [].slice.call(section.querySelectorAll('.vl-pain-card'));\n\n  \/\/ --- Spotlight + tilt 3D (solo con rat\u00f3n) ---\n  if (!reduce && !noHover) {\n    var ticking = false, lastE = null;\n    function apply(){\n      ticking = false;\n      var e = lastE; if (!e) return;\n      var r = section.getBoundingClientRect();\n      section.style.setProperty('--mx', (e.clientX - r.left) + 'px');\n      section.style.setProperty('--my', (e.clientY - r.top) + 'px');\n      cards.forEach(function (card) {\n        var cr = card.getBoundingClientRect();\n        var inner = card.querySelector('.vl-pain-inner');\n        if (!inner) return;\n        if (e.clientX >= cr.left && cr.right >= e.clientX && e.clientY >= cr.top && cr.bottom >= e.clientY) {\n          var px = (e.clientX - cr.left) \/ cr.width - 0.5;\n          var py = (e.clientY - cr.top) \/ cr.height - 0.5;\n          inner.style.transform = 'rotateY(' + (px * 9).toFixed(2) + 'deg) rotateX(' + (-py * 9).toFixed(2) + 'deg)';\n        } else {\n          inner.style.transform = '';\n        }\n      });\n    }\n    section.addEventListener('pointermove', function (e) {\n      lastE = e; section.classList.add('is-spot');\n      if (!ticking) { ticking = true; requestAnimationFrame(apply); }\n    }, { passive: true });\n    section.addEventListener('pointerleave', function () {\n      section.classList.remove('is-spot');\n      cards.forEach(function (c) { var i = c.querySelector('.vl-pain-inner'); if (i) i.style.transform = ''; });\n    });\n  }\n\n  \/\/ Los contadores se animan 100% en CSS (ver @keyframes vl-cnt-*). Ya no se gestionan por JS.\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Upload a sample candidate report and AI will generate a template for your selection reports, replicating your style.<\/p>","protected":false},"author":1,"featured_media":9230,"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":"disabled","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\/en\/wp-json\/wp\/v2\/pages\/8479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/comments?post=8479"}],"version-history":[{"count":172,"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/pages\/8479\/revisions"}],"predecessor-version":[{"id":9212,"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/pages\/8479\/revisions\/9212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/media\/9230"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/en\/wp-json\/wp\/v2\/media?parent=8479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}