{"id":9214,"date":"2026-07-15T10:03:37","date_gmt":"2026-07-15T10:03:37","guid":{"rendered":"https:\/\/voicit.com\/gestion-equipos-seleccion\/"},"modified":"2026-07-15T14:41:43","modified_gmt":"2026-07-15T14:41:43","slug":"teammanagement-und-auswahl","status":"publish","type":"page","link":"https:\/\/voicit.com\/de\/gestion-equipos-seleccion\/","title":{"rendered":"Management des Auswahlteams"},"content":{"rendered":"\n<!--\n  VOICIT \u2014 Landing: Gesti\u00f3n de Equipos de Selecci\u00f3n\n  URL: \/gestion-equipos-seleccion\/\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  \/* FONDO: sin franja blanca arriba, todo al gris del hero *\/\n  body.page-id-9214, body.page-id-9214 #page, body.page-id-9214 #content, body.page-id-9214 .site-content, body.page-id-9214 .ast-container, body.page-id-9214 #primary, body.page-id-9214 #main, body.page-id-9214 .site-main, body.page-id-9214 article, body.page-id-9214 .entry-content, body.page-id-9214 .site-header, body.page-id-9214 #masthead, body.page-id-9214 .ast-primary-header-bar, body.page-id-9214 .main-header-bar {\n    background-color: #F8F8F8 !important;\n  }\n\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-8391 > .entry-content > .vl-landing *\/\n  body.page-id-9214 div#page.hfeed.site,\n  body.page-id-9214 div#content.site-content,\n  body.page-id-9214 div#content,\n  body.page-id-9214 .ast-container,\n  body.page-id-9214 div#primary.content-area,\n  body.page-id-9214 main#main.site-main,\n  body.page-id-9214 article#post-8391,\n  body.page-id-9214 article.page,\n  body.page-id-9214 .entry-content,\n  body.page-id-9214 .entry-content.clear {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n\n  \/* Variables WordPress de padding global *\/\n  body.page-id-9214 {\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-9214 .wp-block-html,\n  body.page-id-9214 .wp-site-blocks,\n  body.page-id-9214 .is-layout-flow,\n  body.page-id-9214 .is-layout-constrained,\n  body.page-id-9214 .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-9214 .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-9214 .entry-header,\n  body.page-id-9214 .ast-page-title-wrapper,\n  body.page-id-9214 .ast-archive-description,\n  body.page-id-9214 .entry-title,\n  body.page-id-9214 h1.entry-title,\n  body.page-id-9214 .page-title {\n    display: none !important;\n  }\n  body.page-id-9214 .entry-content > *:not(.vl-landing) { display: none; }\n\n  \/* \u2500\u2500 4) RESET BOTONES \u2014 Astra pinta TODOS los <button> con el color de marca (#E7FE15).\n        Hay que forzar nuestros colores espec\u00edficos en cada bot\u00f3n del mockup. \u2500\u2500 *\/\n  .vl-landing button,\n  .vl-landing .vl-btn {\n    box-shadow: none !important;\n    text-transform: none !important;\n    letter-spacing: normal !important;\n    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;\n  }\n\n  \/* File picker (Paso 1) \u2014 bot\u00f3n \"Subir informe\" *\/\n  .vl-landing .vl-mk-fp-btn {\n    background: #ECECEC !important;\n    color: #9A9A9A !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-filepicker.is-visible .vl-mk-fp-btn.is-enabled,\n  .vl-landing .vl-mk-fp-btn.is-enabled {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n  }\n\n  \/* Chat (Paso 2) \u2014 botones \"S\u00ed, generar\" \/ \"Ajustar\" \/ \u2715 *\/\n  .vl-landing .vl-mk-chat-btn {\n    background: #F2F2F2 !important;\n    color: #424242 !important;\n    border: 1px solid #E5E5E5 !important;\n  }\n  .vl-landing .vl-mk-chat-btn:hover {\n    background: #E5E5E5 !important;\n    border-color: #161616 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-chat-btn--primary {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n    border-color: #161616 !important;\n  }\n  .vl-landing .vl-mk-chat-btn--primary:hover {\n    background: #2C2C2C !important;\n    border-color: #2C2C2C !important;\n    color: #FFFFFF !important;\n  }\n  .vl-landing .vl-mk-chat-li-delete {\n    background: rgba(0,0,0,0.06) !important;\n    color: #161616 !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-chat-li-delete:hover {\n    background: #FCEAEA !important;\n    color: #DC2626 !important;\n  }\n\n  \/* Editor (Paso 3) \u2014 botones de iconos formato\/longitud + acci\u00f3n \"Guardar plantilla\" *\/\n  .vl-landing .vl-mk-editor-icon-btn {\n    background: transparent !important;\n    color: #4B4B4B !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-editor-icon-btn:hover { background: #F0F0F0 !important; }\n  .vl-landing .vl-mk-editor-icon-btn.is-active {\n    background: #E5E5E5 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action {\n    background: #FFFFFF !important;\n    color: #424242 !important;\n    border: 1px solid #DDDDDD !important;\n  }\n  .vl-landing .vl-mk-editor-action:hover {\n    background: #F5F5F5 !important;\n    border-color: #161616 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action--primary {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n    border-color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action--primary:hover {\n    background: #2C2C2C !important;\n    border-color: #2C2C2C !important;\n    color: #FFFFFF !important;\n  }\n<\/style>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VOICIT LANDING \u2014 Design System\n   Basado en gu\u00eda de marca oficial\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');\n\n\/* Reset dentro del contenedor *\/\n.vl-landing *, .vl-landing *::before, .vl-landing *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.vl-landing {\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;\n  color: #161616;\n  line-height: 1.6;\n  \/* overflow-x: clip evita scroll horizontal SIN romper position:sticky de los descendientes *\/\n  overflow-x: clip;\n  \/* Full-width breakout robusto: funciona si el parent es boxed (1200px) o ya es full-width.\n     calc(50% - 50vw) da un margin negativo solo cuando el parent es m\u00e1s estrecho que el viewport. *\/\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500 Tipograf\u00eda \u2500\u2500\u2500 *\/\n.vl-landing h1 {\n  font-size: clamp(36px, 5vw, 56px);\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: #161616;\n}\n\/* BALANCE GLOBAL DE T\u00cdTULOS: todos los h1\/h2\/h3 reparten sus l\u00edneas de forma\n   equilibrada para que nunca quede una palabra hu\u00e9rfana sola en la \u00faltima l\u00ednea\n   (sobre todo en tablet\/m\u00f3vil). En desktop, los t\u00edtulos que caben en una l\u00ednea\n   no se ven afectados (balance es no-op). Se aplica SIEMPRE, sin clases. *\/\n.vl-landing h1,\n.vl-landing h2,\n.vl-landing h3,\n.vl-landing .vl-h1-balance,\n.vl-landing .vl-h2-balance {\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\/* Hero: el boton secundario va sobre los puntitos -> fondo opaco para que NO se transparenten *\/\n.vl-hero-actions .vl-btn--secondary { background: #F8F8F8 !important; }\n\n.vl-btn--secondary:hover {\n  border-color: #161616;\n}\n\n.vl-btn--brand {\n  background: #E7FE15 !important;\n  color: #161616 !important;\n  font-weight: 700;\n}\n\n.vl-btn--brand:hover {\n  background: #CDE213 !important;\n}\n\n\/* \u2500\u2500\u2500 Badge \u2500\u2500\u2500 *\/\n.vl-badge {\n  display: inline-block;\n  padding: 6px 16px;\n  border-radius: 100px;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n}\n\n.vl-badge--brand {\n  background: #161616;\n  color: #E7FE15;\n}\n\n.vl-badge--green {\n  background: #DBF0DE;\n  color: #29A63B;\n}\n\n.vl-badge--blue {\n  background: #E5F5FC;\n  color: #63C2ED;\n}\n\n.vl-badge--orange {\n  background: #FCE9DF;\n  color: #ED7840;\n}\n\n\/* \u2500\u2500\u2500 Cards \u2500\u2500\u2500 *\/\n.vl-card {\n  background: #FFFFFF;\n  border: 1px solid #DCDCDC;\n  border-radius: 16px;\n  padding: 36px;\n  transition: all 0.3s ease;\n}\n\n.vl-card:hover {\n  box-shadow: 0 8px 32px rgba(0,0,0,0.08);\n  transform: translateY(-4px);\n}\n\n.vl-card--dark {\n  background: #161616;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n\n.vl-card--dark h3, .vl-card--dark h4 {\n  color: #FFFFFF;\n}\n\n.vl-card--dark p {\n  color: #9A9A9A;\n}\n\n\/* \u2500\u2500\u2500 Grid \u2500\u2500\u2500 *\/\n.vl-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 32px;\n}\n\n.vl-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n\/* \u2500\u2500\u2500 Screenshot mock \u2500\u2500\u2500 *\/\n.vl-screenshot {\n  width: 100%;\n  border-radius: 16px;\n  border: 1px solid #DCDCDC;\n  box-shadow: 0 16px 48px rgba(0,0,0,0.1);\n  overflow: hidden;\n}\n\n.vl-screenshot img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* Placeholder para screenshots (reemplazar con img reales) *\/\n.vl-screenshot-placeholder {\n  width: 100%;\n  aspect-ratio: 16\/10;\n  border-radius: 16px;\n  border: 2px dashed #DCDCDC;\n  background: #FAFAFA;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: #9A9A9A;\n  text-align: center;\n  padding: 20px;\n}\n\n\/* \u2500\u2500\u2500 Iconos decorativos \u2500\u2500\u2500 *\/\n.vl-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 24px;\n  flex-shrink: 0;\n}\n\n.vl-icon--brand {\n  background: #161616;\n  color: #E7FE15;\n}\n\n.vl-icon--light {\n  background: #F2F2F2;\n  color: #161616;\n}\n\n.vl-icon img {\n  width: 32px;\n  height: 32px;\n  object-fit: contain;\n}\n\n.vl-icon img.vl-icon-invert {\n  filter: invert(1);\n}\n\n\/* \u2500\u2500\u2500 Tooltip info icon \u2500\u2500\u2500 *\/\n.vl-info-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: default;\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n.vl-info-tooltip .vl-info-icon {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: #E8E8E8;\n  color: #777;\n  font-size: 12px;\n  font-weight: 700;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  flex-shrink: 0;\n  transition: background 0.2s;\n}\n\n.vl-info-tooltip:hover .vl-info-icon {\n  background: #D0D0D0;\n  color: #444;\n}\n\n.vl-info-tooltip .vl-info-text {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #161616;\n  color: #FFFFFF;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.5;\n  padding: 12px 16px;\n  border-radius: 10px;\n  width: 320px;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s, visibility 0.25s;\n  pointer-events: none;\n  z-index: 10;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n}\n\n.vl-info-tooltip .vl-info-text::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #161616;\n}\n\n.vl-info-tooltip:hover .vl-info-text {\n  opacity: 1;\n  visibility: visible;\n}\n\n\/* \u2500\u2500 Card flip on hover \u2500\u2500 *\/\n.vl-card--flip {\n  position: relative;\n  min-height: 120px;\n  cursor: default;\n}\n.vl-card-flip-front {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 20px;\n}\n.vl-card-flip-front h4 {\n  font-size: 20px;\n  margin: 0;\n}\n.vl-card-flip-back {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 32px;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  z-index: 2;\n}\n.vl-card--flip:hover .vl-card-flip-back {\n  opacity: 1;\n  pointer-events: auto;\n}\n\/* Balancea autom\u00e1ticamente las l\u00edneas del p\u00e1rrafo del back en exactamente 2 l\u00edneas.\n   max-width: 40ch deja sitio para ~38-40 caracteres por l\u00ednea \u2192 los textos de ~70\n   caracteres rompen en 2 l\u00edneas de longitud similar (no en 3 como con 26ch). *\/\n.vl-card-flip-back p {\n  text-wrap: pretty;\n  text-wrap: balance;\n  max-width: 40ch;\n  margin-left: auto;\n  margin-right: 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\/* Resetea margin\/line-height del h3 dentro de la fila step para que quede centrado vertical con el n\u00famero *\/\n.vl-step-row .vl-step-number + h3,\n.vl-landing .vl-step-row h3 {\n  margin: 0 !important;\n  padding: 0 !important;\n  line-height: 1.25;\n  display: flex;\n  align-items: center;\n}\n\n\/* \u2500\u2500\u2500 Animaciones (scroll reveal) \u2500\u2500\u2500 *\/\n.vl-reveal {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.vl-reveal.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.vl-reveal-delay-1 { transition-delay: 0.1s; }\n.vl-reveal-delay-2 { transition-delay: 0.2s; }\n.vl-reveal-delay-3 { transition-delay: 0.3s; }\n\n\/* Animaci\u00f3n float suave para screenshots *\/\n@keyframes vl-float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n}\n\n.vl-float {\n  animation: vl-float 4s ease-in-out infinite;\n}\n\n\/* Pulse para CTAs *\/\n@keyframes vl-pulse {\n  0%, 100% { box-shadow: 0 0 0 0 rgba(231,254,21,0.4); }\n  50% { box-shadow: 0 0 0 12px rgba(231,254,21,0); }\n}\n\n.vl-pulse {\n  animation: vl-pulse 2.5s ease-in-out infinite;\n}\n\n\/* Gradiente de fondo animado (hero) *\/\n@keyframes vl-gradient-move {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n\/* Ticker \/ marquee logos *\/\n@keyframes vl-scroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n\/* \u2500\u2500\u2500 Testimonial \u2500\u2500\u2500 *\/\n.vl-testimonial {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 36px;\n  border: 1px solid #DCDCDC;\n  position: relative;\n}\n\n.vl-testimonial::before {\n  content: '\"';\n  font-size: 80px;\n  font-weight: 800;\n  color: #E7FE15;\n  position: absolute;\n  top: 12px;\n  left: 28px;\n  line-height: 1;\n}\n\n.vl-testimonial-text {\n  font-size: 17px;\n  line-height: 1.7;\n  color: #424242;\n  font-style: italic;\n  padding-top: 28px;\n}\n\n.vl-testimonial-author {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-top: 24px;\n}\n\n.vl-testimonial-avatar {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: #F2F2F2;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.vl-testimonial-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.vl-testimonial-name {\n  font-size: 15px;\n  font-weight: 700;\n  color: #161616;\n}\n\n.vl-testimonial-role {\n  font-size: 13px;\n  color: #6E6E6E;\n  line-height: 1.4;\n}\n\n.vl-testimonials-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 24px;\n}\n\n@media (max-width: 900px) {\n  .vl-testimonials-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n\/* \u2500\u2500\u2500 Testimonial sticky-stack \u2500\u2500\u2500 *\/\n.vl-tstack-section { position: relative; }\n\n\/* Track de scroll: 3 viewports de altura = espacio para mostrar las 3 tarjetas *\/\n.vl-tstack-track {\n  position: relative;\n  height: 300vh;\n}\n\n\/* El contenido se queda fijo mientras dura el track *\/\n.vl-tstack-sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  overflow: hidden;\n  padding: 60px 0;\n  box-sizing: border-box;\n}\n\n\/* Contenedor de las cards (apiladas en absoluto). min-height ampliado para que\n   el testimonio m\u00e1s largo (Cristina, ~222 chars) quepa sin recortes incluso si\n   el texto se envuelve a 5-6 l\u00edneas. Todas las cards (con bottom:0) tienen\n   exactamente esta misma altura visual. *\/\n.vl-tstack-cards {\n  position: relative;\n  width: 100%;\n  max-width: 620px;\n  margin: 0 auto;\n  min-height: 400px;\n}\n\n\/* Cada card empieza fuera de pantalla (abajo) y entra al llegar su turno.\n   bottom:0 + display:flex hace que TODAS las cards llenen el alto del contenedor,\n   as\u00ed Cristina (texto m\u00e1s corto) iguala su altura con la de H\u00e9ctor e I\u00f1aki. *\/\n.vl-tstack-card {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 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  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;  \/* el autor va PEGADO al texto (antes: space-between -> hueco blanco enorme) *\/\n  bottom: auto;                 \/* la tarjeta se ajusta a su contenido, no se estira a todo el alto *\/\n}\n.vl-tstack-card[data-tstack-idx=\"0\"] { z-index: 1; }\n.vl-tstack-card[data-tstack-idx=\"1\"] { z-index: 2; }\n.vl-tstack-card[data-tstack-idx=\"2\"] { z-index: 3; }\n\n.vl-tstack-card.is-visible {\n  transform: translateY(0);\n}\n\n\/* Las cards detr\u00e1s se mueven ligeramente arriba con cada nueva,\n   creando sensaci\u00f3n de \"pila de cartas\" *\/\n.vl-tstack-card.is-behind-1 { transform: translateY(-14px) scale(0.97); }\n.vl-tstack-card.is-behind-2 { transform: translateY(-26px) scale(0.94); }\n.vl-tstack-card.is-behind-3 { transform: translateY(-36px) scale(0.91); }\n\n\/* En m\u00f3vil el sticky-stack se mantiene activo (queremos la animaci\u00f3n apilada tambi\u00e9n en vertical).\n   Ajustes espec\u00edficos para m\u00f3vil est\u00e1n en el bloque de auditor\u00eda @media al final del CSS. *\/\n\n.vl-testimonial--compact {\n  padding: 32px 32px 28px;\n}\n\n.vl-testimonial-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #161616;\n  color: #FFFFFF;\n  border-radius: 100px;\n  padding: 10px 18px;\n  font-size: 14px;\n  font-weight: 600;\n  margin-bottom: 16px;\n}\n\n.vl-testimonial-rating .vl-stars {\n  color: #E7FE15;\n  letter-spacing: 1px;\n}\n\n.vl-testimonial-avatar--initials {\n  background: linear-gradient(135deg, #1F1F1F 0%, #3A3A3A 100%);\n  color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 16px;\n  letter-spacing: 0.5px;\n}\n\n\/* \u2500\u2500\u2500 FAQ (estilo minimalista, chevron a la izquierda) \u2500\u2500\u2500 *\/\n.vl-faq details {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #ECECEC;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n.vl-faq details:last-child {\n  border-bottom: none;\n}\n\n.vl-faq summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 20px 0 20px 36px;\n  font-size: 17px;\n  font-weight: 500;\n  color: #161616;\n  display: block;\n  position: relative;\n  transition: color 0.2s;\n}\n.vl-faq summary:hover {\n  color: #424242;\n}\n\n.vl-faq summary::-webkit-details-marker { display: none; }\n\n\/* Chevron a la izquierda del texto, construido con bordes CSS (sin imagen) *\/\n.vl-faq summary::before {\n  content: \"\";\n  position: absolute;\n  left: 8px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #161616;\n  border-bottom: 2px solid #161616;\n  transform: translateY(-75%) rotate(45deg);\n  transition: transform 0.25s ease;\n}\n.vl-faq details[open] summary::before {\n  transform: translateY(-25%) rotate(-135deg);\n}\n\n.vl-faq .vl-faq-answer {\n  padding: 0 0 20px 36px;\n  font-size: 15.5px;\n  line-height: 1.65;\n  color: #6E6E6E;\n}\n\n\/* \u2500\u2500\u2500 Logos marquee \u2500\u2500\u2500 *\/\n.vl-logos-track {\n  display: flex;\n  align-items: center;\n  width: max-content;\n  animation: vl-scroll 33s linear infinite;\n}\n\n.vl-logos-track img {\n  height: 32px;\n  width: auto;\n  max-width: 150px;\n  object-fit: contain;\n  margin-right: 72px;\n  flex-shrink: 0;\n  opacity: 0.6;\n  filter: grayscale(100%);\n  transition: opacity 0.3s, filter 0.3s;\n}\n\n\/* Override espec\u00edfico: el logo de ieTeam tiene mucho aire transparente\n   alrededor de su PNG y queda visualmente peque\u00f1o. Le subimos altura. *\/\n.vl-logos-track img[alt=\"ieTeam\"] {\n  height: 60px;\n  max-width: 210px;\n}\n\n.vl-logos-track img:hover {\n  opacity: 1;\n  filter: grayscale(0%);\n}\n\n\/* \u2500\u2500\u2500 Google rating \u2500\u2500\u2500 *\/\n.vl-google-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  background: #ECECEC;\n  color: #2A2A2A;\n  padding: 12px 24px;\n  border-radius: 100px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.vl-google-badge svg {\n  width: 20px;\n  height: 20px;\n}\n\n.vl-stars {\n  color: #E0A100;\n  letter-spacing: 2px;\n}\n\n\/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .vl-grid-2, .vl-grid-3 {\n    grid-template-columns: 1fr;\n  }\n\n  .vl-section {\n    padding: 64px 0;\n  }\n\n  .vl-hero-flex {\n    flex-direction: column;\n    text-align: center;\n  }\n\n  .vl-hero-actions {\n    justify-content: center;\n  }\n\n  .vl-step-row {\n    flex-direction: column;\n  }\n}\n\n@media (max-width: 600px) {\n  .vl-landing h1 {\n    font-size: 32px;\n  }\n\n  .vl-landing h2 {\n    font-size: 26px;\n  }\n\n  .vl-btn {\n    padding: 14px 24px;\n    font-size: 15px;\n    width: 100%;\n    justify-content: center;\n  }\n\n  .vl-hero-actions {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .vl-card {\n    padding: 28px 24px;\n  }\n}\n\n\/* \u2500\u2500\u2500 Utilidades \u2500\u2500\u2500 *\/\n.vl-text-center { text-align: center; }\n\/* \u2500\u2500\u2500 Mockup Hero: PDF \u2192 IA \u2192 Plantilla \u2500\u2500\u2500 *\/\n.vl-hero-mockup {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0;\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 DROPZONE (siempre visible al inicio) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.vl-mk-dropzone {\n  position: relative;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 96px;\n  padding: 16px;\n  border: 2px dashed #C5C5C5;\n  border-radius: 12px;\n  background: rgba(255,255,255,0.5);\n  margin-bottom: 4px;\n  transition: border-color 0.4s ease, background 0.4s ease;\n  animation: vl-dropzone-soften 0.5s ease-out 1.4s forwards;\n}\n@keyframes vl-dropzone-soften {\n  to {\n    border-color: #ECECEC;\n    background: transparent;\n  }\n}\n\n\/* Hint inicial dentro del dropzone *\/\n.vl-mk-dropzone-hint {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  color: #9A9A9A;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.2px;\n  pointer-events: none;\n  animation: vl-hint-out 0.4s ease-out 1.0s forwards;\n}\n@keyframes vl-hint-out {\n  to { opacity: 0; visibility: hidden; }\n}\n\n\/* PDF que entra desde fuera *\/\n.vl-mk-pdf-wrapper {\n  position: relative;\n  opacity: 0;\n  transform: translate(70px, -50px);\n  animation: vl-pdf-drop 1.0s cubic-bezier(0.34, 1.15, 0.64, 1) 0.45s forwards;\n}\n@keyframes vl-pdf-drop {\n  0%   { opacity: 0; transform: translate(70px, -50px); }\n  30%  { opacity: 1; }\n  100% { opacity: 1; transform: translate(0, 0); }\n}\n.vl-mk-pdf {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: #FFFFFF;\n  border: 1.5px solid #E5E5E5;\n  border-radius: 12px;\n  padding: 12px 16px 12px 12px;\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);\n  transform: rotate(-2deg);\n}\n.vl-mk-pdf-icon { flex-shrink: 0; }\n.vl-mk-pdf-name {\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.2;\n}\n.vl-mk-pdf-size {\n  font-size: 11px;\n  color: #9A9A9A;\n  margin-top: 2px;\n}\n.vl-mk-cursor {\n  position: absolute;\n  bottom: -10px;\n  right: -6px;\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));\n  opacity: 0;\n  animation: vl-cursor-show 0.3s ease-out 0.45s forwards, vl-cursor-bob 2.6s ease-in-out 1.5s infinite;\n}\n@keyframes vl-cursor-show {\n  to { opacity: 1; }\n}\n@keyframes vl-cursor-bob {\n  0%, 100% { transform: translate(0,0); }\n  50%      { transform: translate(-4px,-3px); }\n}\n\n\/* Flechas conectoras \u2014 aparecen despu\u00e9s de la fase anterior *\/\n.vl-mk-arrow {\n  align-self: center;\n  display: flex;\n  justify-content: center;\n  height: 28px;\n  margin: 10px 0;\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.35s ease-out forwards;\n}\n.vl-mk-arrow--1 { animation-delay: 1.55s; }\n.vl-mk-arrow--2 { animation-delay: 2.45s; }\n@keyframes vl-fade-down {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* M\u00e1quina Voicit \u2014 aparece despu\u00e9s de la flecha 1 *\/\n.vl-mk-machine {\n  position: relative;\n  align-self: center;\n  background: #161616;\n  border-radius: 12px;\n  padding: 14px 20px;\n  min-width: 220px;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.4s ease-out 1.85s forwards;\n}\n.vl-mk-machine-pulse {\n  display: none;\n}\n.vl-mk-machine-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.vl-mk-machine-logo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #FFFFFF;\n}\n.vl-mk-machine-logo .vl-mk-gear path { fill: #E7FE15; }\n\n\/* Engranaje girando sobre su propio eje *\/\n.vl-mk-gear {\n  transform-origin: center;\n  transform-box: fill-box;\n  animation: vl-spin 7s linear infinite;\n}\n@keyframes vl-spin {\n  to { transform: rotate(360deg); }\n}\n\n.vl-mk-machine-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n}\n.vl-mk-dot {\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.vl-mk-dot::before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #E7FE15;\n  animation: vl-blink 1.4s ease-in-out infinite;\n}\n@keyframes vl-blink {\n  0%, 100% { opacity: 1; }\n  50%      { opacity: 0.3; }\n}\n\n\/* Shimmer en el texto \"Analizando estructura...\" \u2014 estilo ChatGPT\/Claude *\/\n.vl-mk-shimmer {\n  background: linear-gradient(\n    90deg,\n    rgba(154,154,154,1) 0%,\n    rgba(154,154,154,1) 35%,\n    rgba(255,255,255,1) 50%,\n    rgba(154,154,154,1) 65%,\n    rgba(154,154,154,1) 100%\n  );\n  background-size: 250% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  animation: vl-shimmer 2.2s linear infinite;\n}\n@keyframes vl-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\/* Plantilla generada *\/\n.vl-mk-template {\n  background: #FFFFFF;\n  border: 1.5px solid #E5E5E5;\n  border-radius: 12px;\n  padding: 16px 18px;\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.08);\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.4s ease-out 2.75s forwards;\n}\n.vl-mk-template-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding-bottom: 10px;\n  margin-bottom: 10px;\n  border-bottom: 1px solid #F0F0F0;\n}\n.vl-mk-template-title {\n  font-size: 12.5px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.3;\n}\n.vl-mk-badge-ok {\n  flex-shrink: 0;\n  background: #E7FE15;\n  color: #161616;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 100px;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.vl-mk-section-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.vl-mk-section-list li {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12.5px;\n  color: #424242;\n  font-weight: 500;\n  opacity: 0;\n  animation: vl-li-fade 0.45s ease-out forwards;\n}\n.vl-mk-section-list li:nth-child(1) { animation-delay: 3.1s; }\n.vl-mk-section-list li:nth-child(2) { animation-delay: 3.7s; }\n.vl-mk-section-list li:nth-child(3) { animation-delay: 4.3s; }\n.vl-mk-section-list li:nth-child(4) { animation-delay: 4.9s; }\n.vl-mk-section-list li:nth-child(5) { animation-delay: 5.5s; }\n@keyframes vl-li-fade {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* Texto de cada secci\u00f3n: efecto typewriter de izquierda a derecha *\/\n.vl-mk-section-text {\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 0;\n  animation: vl-typewriter 0.55s steps(24, end) forwards;\n}\n\n\/* Score ring (escala 1-10): c\u00edrculo de progreso con n\u00famero dentro *\/\n.vl-mk-ring {\n  position: relative;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.vl-mk-ring svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg); \/* empezar arco desde arriba (12 en punto) *\/\n  overflow: visible;\n}\n.vl-mk-ring-track {\n  fill: none;\n  stroke: #EAEAEA;\n  stroke-width: 3;\n}\n.vl-mk-ring-fill {\n  fill: none;\n  stroke-width: 3;\n  stroke-linecap: round;\n  \/* circunferencia = 2\u03c0 \u00d7 r (r=12) = 75.398 *\/\n  stroke-dasharray: 75.398;\n  stroke-dashoffset: calc(75.398 * (1 - var(--p, 0) \/ 10));\n  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.vl-mk-ring--high .vl-mk-ring-fill { stroke: #2E9B45; }\n.vl-mk-ring--med  .vl-mk-ring-fill { stroke: #D77A20; }\n.vl-mk-ring--low  .vl-mk-ring-fill { stroke: #C7372F; }\n\/* 10\/10: c\u00edrculo s\u00f3lido (relleno completo, no solo el aro) *\/\n.vl-mk-ring--full .vl-mk-ring-track,\n.vl-mk-ring--full .vl-mk-ring-fill { stroke-width: 14; }\n.vl-mk-ring--full.vl-mk-ring--high .vl-mk-ring-fill { stroke: #2E9B45; }\n\n.vl-mk-ring-num {\n  position: relative;\n  z-index: 1;\n  font-size: 11px;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: -0.4px;\n  font-variant-numeric: tabular-nums;\n}\n.vl-mk-ring--high .vl-mk-ring-num { color: #1F7D34; }\n.vl-mk-ring--med  .vl-mk-ring-num { color: #B65A1D; }\n.vl-mk-ring--low  .vl-mk-ring-num { color: #B2342D; }\n.vl-mk-ring--full .vl-mk-ring-num { color: #FFFFFF; }\n\n\/* Puesto \/ oferta laboral (texto secundario alineado a la derecha del nombre) *\/\n.vl-mk-role {\n  margin-left: auto;\n  font-size: 11px;\n  font-weight: 500;\n  color: #8A8A8A;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 50%;\n  text-align: right;\n  letter-spacing: -0.1px;\n}\n.vl-mk-section-list .vl-mk-role {\n  opacity: 0;\n  animation: vl-role-fade 0.5s ease-out forwards;\n  font-size: 10.5px;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-role { animation-delay: 3.75s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-role { animation-delay: 4.35s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-role { animation-delay: 4.95s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-role { animation-delay: 5.55s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-role { animation-delay: 6.15s; }\n@keyframes vl-role-fade {\n  from { opacity: 0; transform: translateX(6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\/* En el editor: rol justo al lado del nombre de la empresa (alineado a la izquierda) *\/\n.vl-mk-editor-section .vl-mk-role {\n  font-size: 12px;\n  color: #6F6F6F;\n  font-style: normal;\n  margin-left: 0;     \/* anula el margin-left:auto que lo empujaba a la derecha *\/\n  text-align: left;\n  max-width: none;\n}\n\n\/* Animaci\u00f3n de aparici\u00f3n del ring en el mockup hero (tras typewriter del nombre) *\/\n.vl-mk-section-list .vl-mk-ring {\n  opacity: 0;\n  animation: vl-ring-fade 0.45s ease-out forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-ring { animation-delay: 3.55s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-ring { animation-delay: 4.15s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-ring { animation-delay: 4.75s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-ring { animation-delay: 5.35s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-ring { animation-delay: 5.95s; }\n@keyframes vl-ring-fade {\n  from { opacity: 0; transform: scale(0.6); }\n  to   { opacity: 1; transform: scale(1); }\n}\n\/* Hero: ring al inicio (sustituye al check). En editor va antes del name (tras drag). *\/\n.vl-mk-section-list li:nth-child(1) .vl-mk-section-text { animation-delay: 3.15s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-section-text { animation-delay: 3.75s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-section-text { animation-delay: 4.35s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-section-text { animation-delay: 4.95s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-section-text { animation-delay: 5.55s; }\n@keyframes vl-typewriter {\n  to { max-width: 260px; }\n}\n\n.vl-mk-check {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  font-size: 9px;\n  font-weight: 800;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  opacity: 0;\n  transform: scale(0.4);\n  animation: vl-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-check { animation-delay: 3.70s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-check { animation-delay: 4.30s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-check { animation-delay: 4.90s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-check { animation-delay: 5.50s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-check { animation-delay: 6.10s; }\n@keyframes vl-check-pop {\n  to { opacity: 1; transform: scale(1); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 1 \u2014 File picker\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-filepicker {\n  position: relative;\n  background: #FFFFFF;\n  border-radius: 14px;\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\n  border: 1px solid #E8E8E8;\n  max-width: 480px;\n  margin: 0 auto;\n  \/* sin overflow:hidden \u2014 permite que el toast flote por encima del contenedor *\/\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;  \/* sigue el radio del contenedor padre *\/\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  min-width: 0;       \/* clave: por defecto grid items tienen min-width:auto y se expanden al ancho del contenido *\/\n  overflow: hidden;   \/* refuerza el clip para que el ellipsis del nombre funcione dentro de la celda *\/\n  transition: border-color 0.25s ease, background 0.25s ease;\n}\n.vl-mk-fp-file:hover {\n  background: #F0F0F0;\n}\n.vl-mk-fp-file.is-selected {\n  background: #EAEAEA;\n  border-color: #161616;\n}\n.vl-mk-fp-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: #2A2A2A;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0; \/* permite que el flex item se encoja por debajo del tama\u00f1o de su contenido y aplique ellipsis *\/\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.35s ease-out 0.10s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-response {\n  animation: vl-chat-in-left 0.35s ease-out 1.45s forwards;\n}\n\/* La burbuja de \"pensando\" aparece y luego COLAPSA (no solo se desvanece) para no dejar hueco *\/\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\n  animation: vl-chat-in-left 0.35s ease-out 0.55s forwards,\n             vl-chat-fade-out 0.35s ease-in 1.10s 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  from { opacity: 1; max-height: 90px; margin-bottom: 0; }\n  to   { opacity: 0; max-height: 0; margin-bottom: -18px; }   \/* el margin negativo anula el gap del flex *\/\n}\n.vl-mk-chat-thinking { overflow: hidden; }\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: 600px;\n  opacity: 1;\n  padding: 8px 12px 10px;\n}\n\n\/* \u2500\u2500\u2500 DETALLE DE OFERTA EXPANDIDA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Refleja el producto real: tags + An\u00e1lisis de Fit + Se\u00f1ales + Roles potenciales\n   Tama\u00f1os MUY compactos: el detalle expandido debe verse de un vistazo. *\/\n.vl-mk-offer-detail {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n}\n.vl-mk-od-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n.vl-mk-od-tag {\n  font-size: 9px;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 9999px;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n  line-height: 1.4;\n}\n.vl-mk-od-tag--green  { background: #E8F5EB; color: #1F7D34; }\n.vl-mk-od-tag--blue   { background: #E5EEF8; color: #2C5DA0; }\n.vl-mk-od-tag--purple { background: #F0EBF8; color: #6A4AB2; }\n.vl-mk-od-tag--amber  { background: #FBF0E1; color: #B65A1D; }\n\n.vl-mk-od-section { display: flex; flex-direction: column; gap: 2px; }\n.vl-mk-od-label {\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.4px;\n  text-transform: uppercase;\n  color: #888;\n  margin: 0;\n  line-height: 1.2;\n}\n.vl-mk-od-text {\n  font-size: 12px;\n  line-height: 1.45;\n  color: #424242;\n  margin: 0;\n}\n\/* Override forzado contra Astra: el tema aplica .entry-content p { font-size:17px }\n   con specificity 0-1-1, mayor que mi selector base (0-1-0). Necesitamos !important\n   o un selector m\u00e1s espec\u00edfico (uso ambos para que sea blindado en cualquier tema). *\/\n.vl-landing .vl-mk-editor .vl-mk-od-text {\n  font-size: 12px !important;\n  line-height: 1.45 !important;\n  margin: 0 !important;\n  font-family: inherit !important;\n}\n.vl-landing .vl-mk-editor .vl-mk-od-signal-text {\n  font-size: 11.5px !important;\n  line-height: 1.35 !important;\n}\n.vl-landing .vl-mk-editor .vl-mk-od-signal-meta {\n  font-size: 10.5px !important;\n  line-height: 1.3 !important;\n}\n.vl-landing .vl-mk-editor .vl-mk-od-label   { font-size: 10px   !important; line-height: 1.2  !important; }\n.vl-landing .vl-mk-editor .vl-mk-od-tag     { font-size: 10px   !important; }\n.vl-landing .vl-mk-editor .vl-mk-od-role-pill { font-size: 10.5px !important; }\n\n.vl-mk-od-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }\n.vl-mk-od-signal {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  background: #FAFAFA;\n  border: 1px solid #EEEEEE;\n  border-radius: 6px;\n  padding: 5px 7px;\n}\n.vl-mk-od-signal-icon {\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  line-height: 1;\n}\n.vl-mk-od-signal-icon--green  { background: #E8F5EB; }\n.vl-mk-od-signal-icon--blue   { background: #E5EEF8; }\n.vl-mk-od-signal-icon--purple { background: #F0EBF8; }\n.vl-mk-od-signal-icon--amber  { background: #FBF0E1; }\n.vl-mk-od-signal-content { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }\n.vl-mk-od-signal-text { font-size: 9.5px; color: #2A2A2A; line-height: 1.3; font-weight: 500; }\n.vl-mk-od-signal-meta { font-size: 8.5px; color: #888; line-height: 1.3; }\n\n.vl-mk-od-roles { display: flex; flex-wrap: wrap; gap: 4px; }\n.vl-mk-od-role-pill {\n  font-size: 9px;\n  font-weight: 500;\n  color: #424242;\n  background: transparent;\n  border: 1px solid #DCDCDC;\n  border-radius: 9999px;\n  padding: 1px 7px;\n  white-space: nowrap;\n  line-height: 1.4;\n}\n\n\/* Controles Formato \/ Longitud *\/\n.vl-mk-editor-controls {\n  display: flex;\n  gap: 24px;\n  flex-wrap: wrap;\n  opacity: 1;\n}\n.vl-mk-editor-ctrl-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.vl-mk-editor-ctrl-label {\n  font-size: 12px;\n  color: #6E6E6E;\n  font-weight: 500;\n}\n.vl-mk-editor-btn-group {\n  display: flex;\n  gap: 4px;\n}\n.vl-mk-editor-icon-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 7px;\n  color: #4B4B4B;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease;\n  padding: 0;\n  font-family: inherit;\n}\n.vl-mk-editor-icon-btn:hover {\n  background: #F0F0F0;\n}\n.vl-mk-editor-icon-btn.is-active {\n  background: #E5E5E5;\n  color: #161616;\n}\n.vl-mk-editor-icon-btn.is-active:hover {\n  background: #DBDBDB;\n}\n.vl-mk-editor-hash {\n  font-size: 18px;\n  font-weight: 800;\n  font-family: inherit;\n  line-height: 1;\n}\n\n\/* Footer *\/\n.vl-mk-editor-footer {\n  display: flex;\n  gap: 8px;\n  padding: 14px 18px;\n  border-top: 1px solid #EEEEEE;\n  background: #FAFAFA;\n  justify-content: flex-end;\n  border-radius: 0 0 14px 14px;\n}\n.vl-mk-editor-action {\n  background: #FFFFFF;\n  color: #424242;\n  border: 1px solid #DDDDDD;\n  border-radius: 8px;\n  padding: 8px 14px;\n  font-size: 12.5px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n}\n.vl-mk-editor-action:hover {\n  background: #F5F5F5;\n  border-color: #161616;\n  color: #161616;\n}\n.vl-mk-editor-action--primary {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n}\n.vl-mk-editor-action--primary:hover {\n  background: #2C2C2C;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n\n\/* Toast \u2014 pop-up que entra desde arriba *\/\n.vl-mk-editor-toast {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  background: #FFFFFF;\n  border: 1px solid #E0E0E0;\n  border-left: 4px solid #E7FE15;\n  border-radius: 10px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  opacity: 0;\n  pointer-events: none;\n  white-space: nowrap;\n  z-index: 10;\n}\n\n\/* \u2550\u2550\u2550 ANIMACIONES INICIALES (entrada) \u2014 disparadas con .is-visible \u2550\u2550\u2550 *\/\n\n\/* Las 5 secciones aparecen escalonadas al hacer scroll *\/\n.vl-mk-editor.is-visible .vl-mk-editor-section {\n  animation: vl-ed-section-in 0.4s ease-out forwards;\n}\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(1) { animation-delay: 0.20s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(2) { animation-delay: 0.35s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(3) { animation-delay: 0.50s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(4) { animation-delay: 0.65s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(5) { animation-delay: 0.80s; }\n@keyframes vl-ed-section-in {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* Bot\u00f3n \"Guardar plantilla\" \u2014 pulso al hacer click (controlado por JS) *\/\n\n\/* Toast \u2014 visible cuando tiene .is-showing (controlado por JS) *\/\n@keyframes vl-ed-toast-in {\n  from { opacity: 0; transform: translate(-50%, -100%); }\n  to   { opacity: 1; transform: translate(-50%, 0); }\n}\n@keyframes vl-ed-toast-out {\n  from { opacity: 1; transform: translate(-50%, 0); }\n  to   { opacity: 0; transform: translate(-50%, -100%); }\n}\n.vl-mk-editor-toast.is-showing {\n  animation: vl-ed-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n}\n.vl-mk-editor-toast.is-hiding {\n  animation: vl-ed-toast-out 0.4s ease-in forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PAIN CARDS \u2014 Colores e iconos animados en hover\n   Estado base = blanco\/negro. Solo se activa al pasar el rat\u00f3n.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-card--pain {\n  transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;\n}\n.vl-card--pain .vl-icon {\n  transition: background-color 0.4s ease;\n}\n\n\/* Hourglass \u2014 amarillo p\u00e1lido + flip 180\u00b0 *\/\n.vl-card--pain-1 .vl-pain-icon-svg {\n  transform-origin: center;\n  transform-box: fill-box;\n  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);\n}\n.vl-card--pain-1:hover {\n  background-color: #FFF9DB;\n}\n.vl-card--pain-1:hover .vl-icon {\n  background-color: #FCE899;\n}\n.vl-card--pain-1:hover .vl-pain-icon-svg {\n  transform: rotate(180deg);\n}\n\n\/* X mark \u2014 rojo p\u00e1lido + vaiv\u00e9n *\/\n.vl-card--pain-2 .vl-pain-icon-svg {\n  transform-origin: center;\n  transform-box: fill-box;\n}\n.vl-card--pain-2:hover {\n  background-color: #FCEAEA;\n}\n.vl-card--pain-2:hover .vl-icon {\n  background-color: #F5BABA;\n}\n.vl-card--pain-2:hover .vl-pain-icon-svg {\n  animation: vl-pain-wobble 0.55s ease-in-out;\n}\n@keyframes vl-pain-wobble {\n  0%, 100% { transform: rotate(0deg); }\n  20%      { transform: rotate(-14deg); }\n  50%      { transform: rotate(12deg); }\n  75%      { transform: rotate(-6deg); }\n}\n\n\/* Eye (visibilidad de mercado) \u2014 azul p\u00e1lido + parpadeo en hover.\n   Se aplasta verticalmente (cierra p\u00e1rpado) y vuelve a abrirse. *\/\n.vl-card--pain-3 .vl-pain-icon-img {\n  transform-origin: center center;\n  transition: transform 0.2s ease-out;\n  will-change: transform;\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: vl-pain-blink 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1;\n}\n@keyframes vl-pain-blink {\n  0%   { transform: scaleY(1); }\n  45%  { transform: scaleY(0.04); }\n  100% { transform: scaleY(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   COMPARATIVA \"Un cambio que notar\u00e1s\"\n   Estilo monocrom\u00e1tico, alineado con el lenguaje de Voicit\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-compare-grid {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 28px;\n  align-items: stretch;\n  max-width: 980px;\n  margin: 0 auto;\n}\n\n.vl-compare-card {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 36px 36px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.vl-compare-card--before {\n  border: 1px solid #E5E5E5;\n  background: #FAFAFA;\n}\n.vl-compare-card--after {\n  border: 1.5px solid #161616;\n  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.08);\n}\n\n\/* Etiqueta \"ANTES\" \/ \"AHORA\" en may\u00fasculas *\/\n.vl-compare-label {\n  display: inline-block;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: #9A9A9A;\n  margin-bottom: 14px;\n}\n.vl-compare-card--after .vl-compare-label {\n  color: #161616;\n}\n\n\/* T\u00edtulo descriptivo *\/\n.vl-compare-title {\n  font-size: 18px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.35;\n  margin: 0 0 22px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid #ECECEC;\n}\n.vl-compare-card--after .vl-compare-title {\n  border-bottom-color: #E0E0E0;\n}\n\n\/* Lista de items *\/\n.vl-compare-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.vl-compare-list li {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  font-size: 16px;\n  line-height: 1.55;\n}\n.vl-compare-card--before .vl-compare-list li {\n  color: #6E6E6E;\n}\n.vl-compare-card--after .vl-compare-list li {\n  color: #161616;\n  font-weight: 500;\n}\n\n\/* Guion (em-dash) en la card \"Antes\" \u2014 gris claro *\/\n.vl-compare-dash {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 2px;\n}\n.vl-compare-dash::before {\n  content: '';\n  display: block;\n  width: 12px;\n  height: 2px;\n  background: #C5C5C5;\n  border-radius: 1px;\n}\n\n\/* Check en la card \"Ahora\" \u2014 c\u00edrculo negro con \u2713 amarillo de marca\n   Mismo lenguaje que el check del mockup del Hero *\/\n.vl-compare-check {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 800;\n  line-height: 1;\n  margin-top: 2px;\n}\n\n\/* Flecha de transformaci\u00f3n entre las dos cards *\/\n.vl-compare-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n\/* Responsive: en pantallas peque\u00f1as, apilamos vertical y rotamos la flecha *\/\n@media (max-width: 900px) {\n  .vl-compare-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n    max-width: 540px;\n  }\n  .vl-compare-arrow svg {\n    transform: rotate(90deg);\n  }\n}\n\n.vl-mb-8 { margin-bottom: 8px; }\n.vl-mb-12 { margin-bottom: 12px; }\n.vl-mb-16 { margin-bottom: 16px; }\n.vl-mb-24 { margin-bottom: 24px; }\n.vl-mb-32 { margin-bottom: 32px; }\n.vl-mb-48 { margin-bottom: 48px; }\n.vl-mb-64 { margin-bottom: 64px; }\n.vl-mt-32 { margin-top: 32px; }\n.vl-mt-48 { margin-top: 48px; }\n.vl-mt-64 { margin-top: 64px; }\n.vl-gap-16 { gap: 16px; }\n.vl-gap-24 { gap: 24px; }\n.vl-flex { display: flex; }\n.vl-flex-col { flex-direction: column; }\n.vl-items-center { align-items: center; }\n.vl-justify-center { justify-content: center; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUDITOR\u00cdA RESPONSIVE \u2014 tablet vertical y m\u00f3vil\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* \u2500\u2500 TABLET VERTICAL Y M\u00d3VIL (\u2264900px) \u2500\u2500 *\/\n@media (max-width: 900px) {\n  \/* Hero: reducir padding *\/\n  .vl-landing section[style*=\"padding-top:60px\"] {\n    padding-top: 48px !important;\n    padding-bottom: 56px !important;\n  }\n\n  \/* HERO: REORDENAR a vertical (H1 \u2192 p\u00e1rrafo \u2192 mockup \u2192 CTAs \u2192 badge) *\/\n  .vl-hero-flex {\n    flex-direction: column !important;\n    align-items: center !important;\n    text-align: center !important;\n    gap: 28px !important;\n  }\n  \/* Las \"columnas\" inline-styled del hero se aplanan en m\u00f3vil con display:contents,\n     as\u00ed sus hijos pasan a ser flex-items directos de vl-hero-flex y podemos\n     reordenarlos con `order`. *\/\n  .vl-hero-flex > div[style*=\"flex:1.8\"],\n  .vl-hero-flex > div[style*=\"flex:1;min-width:0\"] {\n    display: contents;\n  }\n  \/* Orden visual en m\u00f3vil *\/\n  .vl-hero-flex h1 { order: 1; margin: 0; }\n  .vl-hero-flex p[style*=\"font-size:20px\"] { order: 2; margin: 0; max-width: 560px; }\n  .vl-hero-mockup { order: 3; margin: 0 auto; max-width: 460px; width: 100%; }\n  .vl-hero-flex .vl-hero-actions { order: 4; margin: 0; justify-content: center; }\n  \/* El contenedor del badge Google (el div con margin-top:32px que envuelve el badge) *\/\n  .vl-hero-flex > div > div[style*=\"margin-top:32px\"] {\n    order: 5;\n    margin-top: 0 !important;\n    justify-content: center !important;\n    width: 100%;\n  }\n\n  \/* Carrusel de logos: tama\u00f1os algo menores *\/\n  .vl-logos-track img {\n    height: 28px;\n    max-width: 130px;\n    margin-right: 56px;\n  }\n  .vl-logos-track img[alt=\"ieTeam\"] {\n    height: 50px;\n    max-width: 170px;\n  }\n\n  \/* STEP ROWS \u2014 centrados verticalmente, orden: t\u00edtulo+n\u00ba \u2192 p\u00e1rrafo \u2192 mockup *\/\n  .vl-step-row {\n    flex-direction: column !important;\n    text-align: center !important;\n    align-items: center !important;\n    gap: 28px !important;\n  }\n  .vl-step-row[style*=\"row-reverse\"] { flex-direction: column !important; }\n  .vl-step-row > div { flex: 1 1 100% !important; width: 100%; }\n\n  \/* Los mockups (file picker, chat, editor) deben mantener su contenido alineado\n     a la izquierda en m\u00f3vil\/tablet \u2014 el text-align:center del step-row se les\n     aplicaba por herencia y centraba las burbujas del chat, los t\u00edtulos del editor,\n     las filas del Paso 1, el contenido expandido del Paso 3 (An\u00e1lisis de Fit,\n     Se\u00f1ales, Roles potenciales), etc. Forzamos LEFT en todo el sub\u00e1rbol para\n     que mobile coincida con desktop (donde nada de esto est\u00e1 centrado). *\/\n  .vl-mk-filepicker,\n  .vl-mk-filepicker *,\n  .vl-mk-chat,\n  .vl-mk-chat *,\n  .vl-mk-editor,\n  .vl-mk-editor * {\n    text-align: left !important;\n  }\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  \/* En tablet vertical (601-900px) la card es m\u00e1s estrecha que en desktop\n     (max-width 540 vs 620) y el texto se envuelve a ~7-9 l\u00edneas. Bumpeamos\n     min-height para que el contenido de Cristina (longest) quepa sin salirse. *\/\n  .vl-tstack-cards { max-width: 540px; min-height: 500px; }\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  \/* H2 con clase .vl-h2-balance: en m\u00f3vil ocultamos el <br> desktop y dejamos\n     que text-wrap:balance reparta el t\u00edtulo en l\u00edneas equilibradas. Sin esto,\n     un <br> fijo + t\u00edtulo largo provoca 3 l\u00edneas con una hu\u00e9rfana (\"puesto ideal\"). *\/\n  .vl-landing .vl-h2-balance br.vl-br-desktop { display: none; }\n  .vl-landing .vl-h2-balance {\n    text-wrap: pretty;\n    text-wrap: balance;\n  }\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: 190vh; }    \/* algo menos que 300vh en m\u00f3vil para que sea m\u00e1s r\u00e1pido *\/\n  \/* En m\u00f3vil las cards son m\u00e1s estrechas \u2192 el texto se envuelve en m\u00e1s l\u00edneas y\n     necesita m\u00e1s altura. Bumpeamos min-height para que el testimonio m\u00e1s largo\n     (Cristina, 222 chars) quepa entero sin desbordar al borde inferior. *\/\n  .vl-tstack-cards { min-height: 480px; }\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 (\"Deja de perder candidatos.\n     Empieza a generar oportunidades.\") y el subt\u00edtulo (\"Empieza gratis\u2026\n     Sin tarjeta de cr\u00e9dito.\") quedaban en 3 y 2 l\u00edneas con palabras\n     hu\u00e9rfanas. Reducimos tama\u00f1o y aplicamos text-wrap:balance para\n     conseguir 2 l\u00edneas equilibradas en el H2 y 1 l\u00ednea en el subt\u00edtulo\n     (o 2 balanceadas en pantallas muy estrechas). 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  \/* En pantallas muy estrechas el texto del testimonio se envuelve a 9+ l\u00edneas *\/\n  .vl-tstack-cards { min-height: 540px; }\n\n  \/* CTA final en m\u00f3vil estrecho (\u2264375px): 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\n\/* \u2500\u2500 CAPA DE PUNTOS REUTILIZABLE (Hero, pain y perfiles) \u2500\u2500\n   Base muy tenue a lo ancho de toda la seccion; al mover el raton se iluminan alrededor del cursor. *\/\n.vl-dots { position: relative; }\n.vl-dots > .vl-container { position: relative; z-index: 1; }\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;\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@media (max-width: 1024px) { .vl-dots-layer { display: none; } }\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\n\/* \u2550\u2550\u2550 TIRA DE PERFILES (.vl-segflow) \u2014 variante NO SECUENCIAL de los chevrons \u2550\u2550\u2550\n   Mismo lenguaje visual e interaccion que la tira de proceso, pero con fichas\n   INDEPENDIENTES separadas por un gap: sin puntas encadenadas y sin numeros,\n   porque estos 4 perfiles no son pasos de un proceso. *\/\n.vl-segflow { display: flex; gap: 12px; margin-top: 56px; position: relative; padding-bottom: 100px; }\n.vl-seg {\n  position: relative; flex: 1 1 0; min-width: 0;\n  display: flex; align-items: center; gap: 12px;\n  height: 82px; padding: 0 18px;\n  border-radius: 14px;\n  background: #FFFFFF;\n  box-shadow: 0 3px 9px rgba(0,0,0,0.08);\n  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease,\n              background 0.3s ease, box-shadow 0.32s ease;\n}\n\/* Foco por clases JS (NO :hover puro): asi la ficha sigue marcada aunque el raton\n   baje hacia la tarjeta del mensaje. Ojo con la especificidad: la regla de iluminar\n   debe pesar igual o mas que la de atenuar. *\/\n.vl-segflow.vl-has-focus .vl-seg { opacity: 0.32; }\n.vl-segflow.vl-has-focus .vl-seg.vl-on {\n  opacity: 1; z-index: 10;\n  transform: scale(1.04); transform-origin: 50% 100%;\n  box-shadow: 0 9px 20px rgba(0,0,0,0.16), 0 0 6px rgba(0,0,0,0.10);\n}\n\/* Cada perfil estrena su propio pastel al enfocarse *\/\n.vl-seg:nth-child(1).vl-on { background: #FFE8D6; }\n.vl-seg:nth-child(2).vl-on { background: #E1F4E4; }\n.vl-seg:nth-child(3).vl-on { background: #EEE3F7; }\n.vl-seg:nth-child(4).vl-on { background: #FFF6CC; }\n.vl-seg-ico { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }\n.vl-seg-ico svg { width: 29px; height: 29px; }\n.vl-seg-label { font-size: 15.5px; font-weight: 700; color: #161616; line-height: 1.18; }\n.vl-seg-desc { display: none; }   \/* texto real en el HTML -> TranslatePress SI lo traduce (los data-* NO) *\/\n\/* Tarjeta del mensaje: solo al enfocar, centrada bajo la ficha (posicionada por JS) *\/\n.vl-seg-caption {\n  position: absolute; top: 96px; 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-seg-caption.is-on { opacity: 1; }\n.vl-perfiles h2 { font-size: 44px; line-height: 1.12; }\n.vl-section.vl-perfiles { padding-top: 140px; padding-bottom: 140px; }\n\n\/* MOVIL + TABLET (<=1024px): las fichas se apilan; la tarjeta pasa a flujo normal *\/\n@media (max-width: 1024px) {\n  .vl-segflow { flex-direction: column; gap: 10px; margin-top: 30px; padding-bottom: 0; }\n  .vl-seg { flex: none; width: 100%; height: 68px; padding: 0 20px; }\n  .vl-seg-label { font-size: 14.5px; }\n  .vl-seg-ico svg { width: 26px; height: 26px; }\n  .vl-section.vl-perfiles { padding-top: 72px; padding-bottom: 72px; }\n  .vl-perfiles h2 { font-size: 30px; }\n  .vl-seg-caption {\n    position: static; display: none; width: auto; max-width: 100%;\n    left: auto; margin: 16px auto 0; font-size: 15px;\n  }\n  .vl-seg-caption.is-on { display: block; }\n}\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\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\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\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\/* \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\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 movil *\/\n  .vl-pain-inner { transform: none !important; } \/* sin tilt en movil *\/\n}\n\n\/* \u2500\u2500 Ajustes de la seccion de 3 pasos: minimo espacio arriba, maximo para las animaciones \u2500\u2500 *\/\n\/* Titulo en UNA sola linea, escalando con el ancho para que nunca desborde *\/\n.vl-ssteps-dtitle h2 { max-width: none !important; white-space: nowrap; font-size: clamp(24px, 2.7vw, 37px); }\n.vl-ssteps-dtitle { margin-bottom: 18px !important; }\n.vl-ssteps-progress { margin-bottom: 30px; }\n\/* El contenedor debe ser flex-column para que el escenario pueda CRECER y ocupar el resto\n   (sin esto el stage se queda a 0 de alto y los pasos, que son absolutos, se solapan con el titulo). *\/\n.vl-ssteps-sticky > .vl-container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }\n.vl-ssteps-stage { flex: 1 1 auto; min-height: 340px; }   \/* ocupa el resto -> pasos centrados y con aire *\/\n.vl-ssteps { padding-bottom: 120px; }                     \/* separacion con \"Para todo tipo de perfiles\" *\/\n@media (max-width: 1024px) {\n  .vl-ssteps-dtitle h2 { white-space: normal; font-size: 30px; }\n  .vl-ssteps-sticky > .vl-container { display: block; }\n  .vl-ssteps-stage { min-height: 0; }\n  .vl-ssteps { padding-bottom: 0; }\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\n\/* \u2500\u2500 PASO 3: solo la oportunidad destacada + fila \"Ver mas oportunidades\" \u2500\u2500 *\/\n.vl-mk-editor-section.vl-oculta { display: none; }\n.vl-mk-more {\n  display: flex; align-items: center; justify-content: center; gap: 7px;\n  padding: 11px 14px; margin-top: 6px;\n  background: #F7F7F7; border-radius: 10px;\n  font-size: 12.5px; font-weight: 700; color: #6E6E6E;\n  cursor: pointer; user-select: none;\n  transition: background 0.2s ease, color 0.2s ease;\n}\n.vl-mk-more:hover { background: #EFEFEF; color: #161616; }\n.vl-mk-more.vl-oculta { display: none; }\n.vl-mk-more::after { content: \"\"; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); }\n\n\/* \u2500\u2500 PASO 2: chat mas compacto en vertical \u2500\u2500 *\/\n.vl-mk-chat { gap: 14px; }\n.vl-mk-chat-bubble--ai { padding: 13px 16px; }\n.vl-mk-chat-intro { font-size: 15px !important; line-height: 1.4 !important; margin: 0 0 11px !important; }\n.vl-mk-chat-sections { gap: 7px; }\n.vl-mk-chat-sections li { line-height: 1.35; }\n.vl-mk-chat-question { font-size: 15px !important; line-height: 1.4 !important; margin-top: 11px !important; margin-bottom: 9px !important; }\n.vl-mk-chat-buttons { margin-top: 2px; }\n\n\/* \u2550\u2550 PASO 3: detalle de una oportunidad (oferta + responsable + empresa + borrador) \u2550\u2550 *\/\n.vl-mk-od-block { margin-top: 12px; }\n.vl-mk-od-label {\n  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;\n  text-transform: uppercase; color: #9A9A9A;\n}\n\/* La oferta *\/\n.vl-mk-od-offer {\n  display: flex; align-items: center; gap: 10px;\n  padding: 9px 11px; border: 1px solid #ECECEC; border-radius: 10px;\n  background: #FAFAFA; cursor: pointer;\n  transition: border-color 0.2s ease, background 0.2s ease;\n}\n.vl-mk-od-offer:hover { border-color: #161616; background: #FFFFFF; }\n.vl-mk-od-offer-ico { font-size: 14px; flex-shrink: 0; }\n.vl-mk-od-offer-txt { min-width: 0; flex: 1; }\n.vl-mk-od-offer-title { font-size: 12.5px; font-weight: 700; color: #161616; }\n.vl-mk-od-offer-meta { font-size: 11px; color: #9A9A9A; margin-top: 1px; }\n.vl-mk-od-offer-cta {\n  flex-shrink: 0; font-size: 11px; font-weight: 700; color: #161616;\n  border: 1px solid #DDDDDD; border-radius: 999px; padding: 4px 10px; background: #FFFFFF;\n}\n\/* Responsable del proceso *\/\n.vl-mk-od-person { display: flex; align-items: center; gap: 10px; }\n.vl-mk-od-avatar {\n  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;\n  background: linear-gradient(135deg,#C9C9C9,#E4E4E4); color: #FFFFFF;\n  font-size: 11px; font-weight: 800;\n  display: inline-flex; align-items: center; justify-content: center;\n}\n.vl-mk-od-person-txt { min-width: 0; flex: 1; }\n.vl-mk-od-person-name { font-size: 12.5px; font-weight: 700; color: #161616; }\n.vl-mk-od-person-role { font-size: 11px; color: #9A9A9A; margin-top: 1px; }\n.vl-mk-od-contact { display: flex; gap: 5px; flex-shrink: 0; }\n.vl-mk-od-chip {\n  width: 26px; height: 26px; border-radius: 8px;\n  border: 1px solid #E4E4E4; background: #FFFFFF;\n  display: inline-flex; align-items: center; justify-content: center;\n  font-size: 11.5px; font-weight: 800; color: #4B4B4B; cursor: pointer;\n  transition: border-color 0.2s ease, color 0.2s ease;\n}\n.vl-mk-od-chip:hover { border-color: #161616; color: #161616; }\n\/* Contexto de la empresa *\/\n.vl-mk-od-stats { display: flex; gap: 8px; margin-bottom: 8px; }\n.vl-mk-od-stat {\n  flex: 1; min-width: 0; text-align: center;\n  padding: 7px 6px; border-radius: 9px; background: #F7F7F7;\n}\n.vl-mk-od-stat b { display: block; font-size: 14px; font-weight: 800; color: #161616; line-height: 1.15; }\n.vl-mk-od-stat span { display: block; font-size: 10px; color: #9A9A9A; margin-top: 2px; line-height: 1.25; }\n.vl-mk-od-text { margin: 0; font-size: 12px; line-height: 1.5; color: #5A5A5A; }\n\/* Boton: generar borrador *\/\n\/* OJO: Astra pinta TODOS los <button> con el amarillo de marca -> hace falta !important *\/\n.vl-landing .vl-mk-od-draft {\n  width: 100%; margin-top: 14px;\n  display: flex; align-items: center; justify-content: center; gap: 7px;\n  padding: 10px 14px; border: none !important; border-radius: 10px;\n  background: #161616 !important; color: #FFFFFF !important;\n  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;\n  transition: background 0.2s ease;\n}\n.vl-landing .vl-mk-od-draft:hover { background: #2C2C2C !important; }\n.vl-mk-od-draft[disabled] { opacity: 0.55; cursor: default; }\n.vl-mk-od-draft-ico { font-size: 13px; }\n.vl-mk-od-draftbox[hidden] { display: none; }\n.vl-mk-od-draftbox {\n  margin-top: 9px; padding: 11px 13px;\n  border: 1px solid #ECECEC; border-left: 3px solid #E7FE15; border-radius: 10px;\n  background: #FAFAFA;\n}\n.vl-mk-od-draftbox h6 {\n  margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;\n  text-transform: uppercase; color: #9A9A9A;\n}\n.vl-mk-od-draftbox p { margin: 0; font-size: 12px; line-height: 1.55; color: #2E2E2E; }\n\n\/* Tooltip de los botones de contacto (LinkedIn \/ email \/ telefono) *\/\n.vl-mk-od-chip { position: relative; }\n\/* Anclado a la DERECHA (no centrado): los chips estan pegados al borde y el acordeon\n   tiene overflow:hidden, asi que un tooltip centrado se recortaria. Asi crece hacia dentro. *\/\n.vl-mk-od-chip::after {\n  content: attr(data-tip);\n  position: absolute; bottom: calc(100% + 7px); right: -2px; left: auto;\n  transform: translateY(3px);\n  white-space: nowrap; z-index: 30;\n  background: #161616; color: #FFFFFF;\n  font-size: 11px; font-weight: 600; line-height: 1;\n  padding: 6px 9px; border-radius: 7px;\n  opacity: 0; pointer-events: none;\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.vl-mk-od-chip::before {\n  content: ''; position: absolute; bottom: calc(100% + 2px); right: 7px; left: auto;\n  transform: translateY(3px); z-index: 30;\n  border: 5px solid transparent; border-top-color: #161616;\n  opacity: 0; pointer-events: none;\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.vl-mk-od-chip:hover::after,\n.vl-mk-od-chip:hover::before { opacity: 1; transform: translateY(0); }\n\n\/* Paso 3: \"Exportar datos\" en la cabecera -> nos ahorramos la fila del pie entera *\/\n.vl-mk-editor-head--action {\n  display: flex; align-items: center; justify-content: space-between; gap: 12px;\n}\n.vl-mk-editor-head--action .vl-mk-editor-action { flex-shrink: 0; padding: 6px 12px; font-size: 11.5px; }\n\n\/* \u2550\u2550 PASO 3: panel de la oportunidad MAS COMPACTO en vertical \u2550\u2550 *\/\n\/* El h6 global mete 20px de margen inferior -> hay que ganarle en especificidad *\/\n.vl-landing .vl-mk-offer-detail .vl-mk-od-label {\n  margin: 0 0 5px !important;\n  font-size: 10px;\n}\n.vl-mk-offer-detail .vl-mk-od-block { margin-top: 9px; }\n.vl-mk-offer-detail .vl-mk-od-offer { padding: 8px 10px; gap: 9px; }\n.vl-mk-offer-detail .vl-mk-od-offer-title { font-size: 12px; }\n.vl-mk-offer-detail .vl-mk-od-offer-meta { font-size: 10.5px; }\n.vl-mk-offer-detail .vl-mk-od-offer-cta { padding: 3px 9px; font-size: 10.5px; }\n.vl-mk-offer-detail .vl-mk-od-avatar { width: 27px; height: 27px; font-size: 10px; }\n.vl-mk-offer-detail .vl-mk-od-chip { width: 24px; height: 24px; }\n.vl-mk-offer-detail .vl-mk-od-stats { gap: 6px; margin-bottom: 6px; }\n.vl-mk-offer-detail .vl-mk-od-stat { padding: 5px 5px; }\n.vl-mk-offer-detail .vl-mk-od-stat b { font-size: 13px; }\n.vl-mk-offer-detail .vl-mk-od-stat span { font-size: 9.5px; }\n.vl-mk-offer-detail .vl-mk-od-text { font-size: 11.5px; line-height: 1.45; }\n.vl-landing .vl-mk-offer-detail .vl-mk-od-draft { margin-top: 10px; padding: 9px 14px; font-size: 12px; }\n\n\/* Modo borrador generado: solo queda \"Responsable del proceso\" + el mensaje *\/\n.vl-mk-offer-detail.vl-draft-on .vl-mk-od-block--offer,\n.vl-mk-offer-detail.vl-draft-on .vl-mk-od-block--company,\n.vl-landing .vl-mk-offer-detail.vl-draft-on .vl-mk-od-draft { display: none !important; }\n.vl-mk-offer-detail.vl-draft-on .vl-mk-od-draftbox { margin-top: 12px; }\n\n\/* \u2550\u2550 MOVIL + TABLET VERTICAL: paso 2 (chat) y paso 3 (oportunidades) compactos \u2550\u2550 *\/\n@media (max-width: 1024px) {\n  \/* Chat: la burbuja de la IA usa todo el ancho -> las vi\u00f1etas caben en 1 linea *\/\n  .vl-mk-chat-bubble--ai { max-width: 100% !important; }\n}\n@media (max-width: 768px) {\n  \/* Paso 2: vi\u00f1etas mas peque\u00f1as por si el ancho sigue justo *\/\n  .vl-mk-chat-sections li { font-size: 12px; }\n  \/* Paso 3: cabecera del panel (titulo + Exportar datos) compacta en una linea *\/\n  .vl-mk-editor-head--action { padding: 10px 14px; gap: 8px; }\n  .vl-mk-editor-head--action .vl-mk-editor-title { font-size: 12px; line-height: 1.3; }\n  .vl-mk-editor-head--action .vl-mk-editor-action { padding: 5px 10px; font-size: 10.5px; }\n  \/* Detalle de la oportunidad *\/\n  .vl-mk-offer-detail .vl-mk-od-offer-title { font-size: 11.5px; }\n  .vl-mk-offer-detail .vl-mk-od-offer-meta { font-size: 10px; }\n  .vl-mk-offer-detail .vl-mk-od-offer-cta { padding: 3px 8px; font-size: 10px; }\n  \/* Responsable en UNA linea: en movil sobra el \"\u00b7 publico la oferta\" *\/\n  .vl-mk-od-person-role .vl-mk-od-pub { display: none; }\n  \/* Metricas: etiquetas mas peque\u00f1as y compactas (evita roturas feas) *\/\n  .vl-mk-offer-detail .vl-mk-od-stats { gap: 5px; }\n  .vl-mk-offer-detail .vl-mk-od-stat { padding: 5px 4px; }\n  .vl-mk-offer-detail .vl-mk-od-stat b { font-size: 12px; }\n  .vl-mk-offer-detail .vl-mk-od-stat span { font-size: 8.5px; line-height: 1.2; }\n  .vl-mk-offer-detail .vl-mk-od-text { font-size: 11px; }\n  .vl-landing .vl-mk-offer-detail .vl-mk-od-draft { font-size: 11.5px; padding: 9px 10px; }\n  \/* Fila \"Ver mas oportunidades\" *\/\n  .vl-mk-more { padding: 10px 12px; font-size: 12px; }\n  \/* Borrador generado *\/\n  .vl-mk-od-draftbox p { font-size: 11.5px; }\n}\n<\/style>\n\n<style id=\"vl-tm-styles\">\n\/* Paleta: negro #161616 para los paneles \"gr\u00e1fica\", amarillo #E7FE15 solo\n   sobre oscuro, grises sobre blanco. Tipograf\u00eda heredada (Manrope). *\/\n\n.vl-tm { font-family: inherit; }\n.vl-tm *, .vl-tm *::before, .vl-tm *::after { box-sizing: border-box; }\n\n\/* Tarjeta base blanca (hero, perfil) *\/\n.vl-tm-card {\n  position: relative;\n  background: #FFFFFF;\n  border: 1px solid #E8E8E8;\n  border-radius: 16px;\n  box-shadow: 0 14px 40px -12px rgba(0,0,0,0.16);\n  overflow: hidden;\n  max-width: 500px;\n  margin: 0 auto;\n}\n\/* El hero NO recorta (overflow visible) para que el toast \"Excel descargado\"\n   flote por encima de la tarjeta sin cortarse. Las esquinas se mantienen\n   redondeadas porque ning\u00fan contenido tiene fondo de color en las esquinas. *\/\n.vl-tm-hero { overflow: visible; }\n\n\/* \u2500\u2500 Cabecera de producto (logo + nombre + acci\u00f3n) \u2500\u2500 *\/\n.vl-tm-head {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid #F0F0F0;\n}\n.vl-tm-logo {\n  width: 34px; height: 34px;\n  border-radius: 9px;\n  background: #161616;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n}\n.vl-tm-head-title { font-size: 15px; font-weight: 800; color: #161616; letter-spacing: -0.01em; }\n.vl-tm-head-action {\n  margin-left: auto;\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: 12px; font-weight: 700; color: #4B4B4B;\n  background: #F4F4F4; border: 1px solid #E6E6E6;\n  padding: 7px 12px; border-radius: 8px;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;\n}\n.vl-tm-head-action:hover { background: #161616; color: #FFFFFF; border-color: #161616; }\n.vl-tm-head-action:active { transform: scale(0.96); }\n\n\/* Toast de exportaci\u00f3n (flota sobre la tarjeta) *\/\n.vl-tm-toast {\n  position: absolute;\n  top: -10px; 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; font-weight: 700; color: #161616;\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\n  display: flex; align-items: center; gap: 8px;\n  opacity: 0; pointer-events: none; white-space: nowrap; z-index: 20;\n}\n.vl-tm-toast.is-showing { animation: vl-tm-toast-in 0.45s cubic-bezier(0.34,1.5,0.64,1) forwards; }\n.vl-tm-toast.is-hiding { animation: vl-tm-toast-out 0.4s ease-in forwards; }\n@keyframes vl-tm-toast-in { from { opacity: 0; transform: translate(-50%,-100%); } to { opacity: 1; transform: translate(-50%,0); } }\n@keyframes vl-tm-toast-out { from { opacity: 1; transform: translate(-50%,0); } to { opacity: 0; transform: translate(-50%,-100%); } }\n\n\/* \u2500\u2500 Lista de compa\u00f1eros (HERO) \u2500\u2500 *\/\n.vl-tm-roster { padding: 8px 10px 12px; }\n.vl-tm-roster-cols {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  column-gap: 22px;\n  padding: 6px 10px 8px;\n  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;\n  text-transform: uppercase; color: #A0A0A0;\n}\n.vl-tm-roster-cols span:nth-child(2),\n.vl-tm-roster-cols span:nth-child(3) { text-align: right; min-width: 52px; }\n\n.vl-tm-member {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  column-gap: 22px;\n  padding: 9px 10px;\n  border-radius: 10px;\n  opacity: 0;\n  transform: translateY(8px);\n}\n.vl-tm.is-visible .vl-tm-member { animation: vl-tm-fadeup 0.5s ease-out forwards; }\n.vl-tm.is-visible .vl-tm-member:nth-child(2) { animation-delay: 0.10s; }\n.vl-tm.is-visible .vl-tm-member:nth-child(3) { animation-delay: 0.20s; }\n.vl-tm.is-visible .vl-tm-member:nth-child(4) { animation-delay: 0.30s; }\n.vl-tm.is-visible .vl-tm-member:nth-child(5) { animation-delay: 0.40s; }\n.vl-tm-member:hover { background: #F7F7F7; }\n.vl-tm-member-id { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.vl-tm-avatar {\n  width: 34px; height: 34px; border-radius: 50%;\n  flex-shrink: 0; object-fit: cover;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 12px; font-weight: 700; color: #FFFFFF;\n}\n.vl-tm-member-name { font-size: 13px; font-weight: 600; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.vl-tm-member-sub { font-size: 11px; color: #9A9A9A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.vl-tm-member-num { font-size: 14px; font-weight: 800; color: #161616; text-align: right; min-width: 52px; font-variant-numeric: tabular-nums; }\n.vl-tm-member-num small { display: block; font-size: 9px; font-weight: 600; color: #B0B0B0; text-transform: uppercase; letter-spacing: 0.3px; }\n.vl-tm-badge {\n  font-size: 10px; font-weight: 700; color: #1F7D34;\n  background: #E8F5EB; padding: 3px 9px; border-radius: 9999px;\n  text-align: center; min-width: 52px;\n}\n\/* permiso de menor autoridad: gris neutro *\/\n.vl-tm-badge--member { color: #6E6E6E; background: #EEEEEE; }\n\/* avatar como imagen *\/\nimg.vl-tm-avatar { object-fit: cover; }\n\n\/* \u2500\u2500 Panel \"gr\u00e1fica\" negro (PASO 1 dashboard + perfil) \u2500\u2500 *\/\n.vl-tm-graph {\n  background: #161616;\n  border-radius: 14px;\n  padding: 18px 18px 14px;\n  position: relative;\n}\n.vl-tm-graph-legend { display: flex; gap: 8px; margin-bottom: 16px; }\n.vl-tm-chip {\n  display: inline-flex; align-items: center; gap: 7px;\n  font-size: 11px; font-weight: 700; color: #FFFFFF;\n  background: rgba(255,255,255,0.08);\n  border: 1px solid rgba(255,255,255,0.14);\n  padding: 6px 11px; border-radius: 9999px;\n  cursor: pointer; user-select: none;\n  transition: opacity 0.2s ease, background 0.2s ease;\n}\n.vl-tm-chip.is-off { opacity: 0.4; }\n.vl-tm-chip-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }\n.vl-tm-chip-swatch--reports { background: repeating-linear-gradient(45deg, #C9CD4A 0 2px, #8A8E2E 2px 4px); }\n.vl-tm-chip-swatch--users { background: #EDEDED; }\n\n\/* zona del gr\u00e1fico *\/\n.vl-tm-plot {\n  position: relative;\n  height: 150px;\n  display: flex;\n  align-items: flex-end;\n  gap: 0;\n  padding-left: 26px;\n  border-bottom: 1px solid rgba(255,255,255,0.12);\n}\n\/* eje Y labels *\/\n.vl-tm-yaxis { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; display: flex; flex-direction: column; justify-content: space-between; }\n.vl-tm-yaxis span { font-size: 9px; color: rgba(255,255,255,0.4); line-height: 1; }\n\/* grid lines *\/\n.vl-tm-gridline { position: absolute; left: 26px; right: 0; height: 1px; background: rgba(255,255,255,0.07); }\n\n.vl-tm-bargroup {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 3px;\n  position: relative;\n  cursor: pointer;\n}\n.vl-tm-bar {\n  width: 9px;\n  border-radius: 3px 3px 0 0;\n  height: 0;\n  transition: height 0.7s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;\n}\n.vl-tm.is-visible .vl-tm-bar { height: var(--h, 0); }\n.vl-tm-bar--reports { background: repeating-linear-gradient(45deg, #C9CD4A 0 3px, #7E8228 3px 6px); }\n.vl-tm-bar--users { background: #EDEDED; }\n.vl-tm-bargroup:nth-child(2) .vl-tm-bar { transition-delay: 0.05s; }\n.vl-tm-bargroup:nth-child(3) .vl-tm-bar { transition-delay: 0.10s; }\n.vl-tm-bargroup:nth-child(4) .vl-tm-bar { transition-delay: 0.15s; }\n.vl-tm-bargroup:nth-child(5) .vl-tm-bar { transition-delay: 0.20s; }\n.vl-tm-bargroup:nth-child(6) .vl-tm-bar { transition-delay: 0.25s; }\n.vl-tm-bargroup:nth-child(7) .vl-tm-bar { transition-delay: 0.30s; }\n.vl-tm-bargroup:nth-child(8) .vl-tm-bar { transition-delay: 0.35s; }\n\/* serie oculta por toggle *\/\n.vl-tm-graph.hide-reports .vl-tm-bar--reports,\n.vl-tm-graph.hide-users .vl-tm-bar--users { opacity: 0; width: 0; }\n\/* barra resaltada al hover *\/\n.vl-tm-bargroup.is-active .vl-tm-bar--reports { background: repeating-linear-gradient(45deg, #E7FE15 0 3px, #B8CC10 3px 6px); }\n.vl-tm-bargroup.is-active .vl-tm-bar--users { background: #FFFFFF; }\n\n.vl-tm-xaxis { display: flex; padding-left: 26px; margin-top: 7px; }\n.vl-tm-xaxis span { flex: 1; text-align: center; font-size: 9px; color: rgba(255,255,255,0.45); white-space: nowrap; }\n\n\/* l\u00ednea de media (perfil) *\/\n.vl-tm-avg {\n  position: absolute; left: 26px; right: 0;\n  border-top: 1.5px dashed rgba(231,254,21,0.7);\n  pointer-events: none;\n}\n.vl-tm-avg-tag {\n  position: absolute; left: 30px; top: -9px;\n  font-size: 9px; font-weight: 700; color: #161616;\n  background: #E7FE15; padding: 1px 7px; border-radius: 9999px;\n}\n\n\/* tooltip del gr\u00e1fico \u2014 uno por grupo, aparece encima de las barras al hover *\/\n.vl-tm-tip {\n  position: absolute;\n  bottom: 100%; left: 50%;\n  margin-bottom: 8px;\n  transform: translateX(-50%) translateY(4px);\n  background: #2A2A2A;\n  border: 1px solid rgba(255,255,255,0.16);\n  border-radius: 10px;\n  padding: 9px 12px;\n  width: 150px;\n  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n  z-index: 5;\n}\n\/* el grupo activo por defecto (Abr) muestra su tooltip hasta el primer hover real *\/\n.vl-tm-graph:not(:hover) .vl-tm-bargroup.is-active .vl-tm-tip,\n.vl-tm-bargroup:hover .vl-tm-tip { opacity: 1; transform: translateX(-50%) translateY(0); }\n\/* resaltado de barras: el activo por defecto y el que est\u00e1 en hover *\/\n.vl-tm-graph:not(:hover) .vl-tm-bargroup.is-active .vl-tm-bar--reports,\n.vl-tm-bargroup:hover .vl-tm-bar--reports { background: repeating-linear-gradient(45deg, #E7FE15 0 3px, #B8CC10 3px 6px); }\n.vl-tm-graph:not(:hover) .vl-tm-bargroup.is-active .vl-tm-bar--users,\n.vl-tm-bargroup:hover .vl-tm-bar--users { background: #FFFFFF; }\n.vl-tm-tip-title { font-size: 10px; color: rgba(255,255,255,0.6); margin-bottom: 6px; font-weight: 600; }\n.vl-tm-tip-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #FFFFFF; font-weight: 600; }\n.vl-tm-tip-row + .vl-tm-tip-row { margin-top: 3px; }\n.vl-tm-tip-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }\n\n\/* \u2500\u2500 Perfil individual (PASO 2): stat cards + lista reuniones \u2500\u2500 *\/\n.vl-tm-profile-bar {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 18px; border-bottom: 1px solid #F0F0F0;\n}\n.vl-tm-profile-back { color: #B0B0B0; font-size: 14px; }\n.vl-tm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #EDEDED; }\n.vl-tm-stat { background: #F7F7F7; padding: 16px 12px; text-align: center; }\n.vl-tm-stat-num { font-size: 22px; font-weight: 800; color: #161616; line-height: 1; font-variant-numeric: tabular-nums; }\n.vl-tm-stat-label { font-size: 10.5px; color: #8A8A8A; margin-top: 5px; font-weight: 500; }\n\n.vl-tm-meetings { padding: 6px 0 8px; }\n.vl-tm-meeting {\n  display: flex; align-items: center; gap: 12px;\n  padding: 11px 18px;\n  position: relative;\n  opacity: 0;\n  transform: translateX(8px);\n}\n.vl-tm.is-visible .vl-tm-meeting { animation: vl-tm-fadein 0.45s ease-out forwards; }\n.vl-tm.is-visible .vl-tm-meeting:nth-child(1) { animation-delay: 0.45s; }\n.vl-tm.is-visible .vl-tm-meeting:nth-child(2) { animation-delay: 0.58s; }\n.vl-tm.is-visible .vl-tm-meeting:nth-child(3) { animation-delay: 0.71s; }\n.vl-tm.is-visible .vl-tm-meeting:nth-child(4) { animation-delay: 0.84s; }\n.vl-tm-meeting + .vl-tm-meeting { border-top: 1px solid #F4F4F4; }\n.vl-tm-meeting:hover { background: #F9F9F9; }\n.vl-tm-meeting-name { flex: 1; font-size: 12.5px; font-weight: 600; color: #2A2A2A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }\n.vl-tm-meeting-dur { font-size: 11.5px; color: #8A8A8A; flex-shrink: 0; font-variant-numeric: tabular-nums; }\n.vl-tm-meeting-report { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }\n.vl-tm-meeting-report svg { width: 18px; height: 18px; }\n.vl-tm-play {\n  flex-shrink: 0;\n  width: 28px; height: 28px; border-radius: 50%;\n  background: #161616; color: #FFFFFF;\n  display: flex; align-items: center; justify-content: center;\n  opacity: 0; transform: scale(0.7);\n  cursor: pointer;\n  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;\n}\n.vl-tm-meeting:hover .vl-tm-play { opacity: 1; transform: scale(1); }\n.vl-tm-play:hover { background: #2C2C2C; }\n\n\/* \u2500\u2500 Reproductor inline: al pulsar play, la fila \"suena\" \u2500\u2500 *\/\n.vl-tm-play-tri { display: block; }\n.vl-tm-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }\n.vl-tm-eq i {\n  width: 2.5px; border-radius: 1px;\n  background: #FFFFFF;  \/* blanco sobre el bot\u00f3n oscuro *\/\n  height: 100%;\n  animation: vl-tm-eq 0.85s ease-in-out infinite;\n}\n.vl-tm-eq i:nth-child(2) { animation-delay: 0.22s; }\n.vl-tm-eq i:nth-child(3) { animation-delay: 0.44s; }\n\/* fila reproduci\u00e9ndose: play visible aunque no haya hover + cambia a ecualizador *\/\n.vl-tm-meeting.is-playing .vl-tm-play { opacity: 1; transform: scale(1); background: #161616; }\n.vl-tm-meeting.is-playing .vl-tm-play-tri { display: none; }\n.vl-tm-meeting.is-playing .vl-tm-eq { display: flex; }\n\/* barra de progreso en la parte baja de la fila (oscura \u2014 sobre fondo blanco) *\/\n.vl-tm-progress {\n  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;\n  background: #161616; border-radius: 0 2px 2px 0;\n}\n.vl-tm-meeting.is-playing .vl-tm-progress { animation: vl-tm-prog 9s linear forwards; }\n@keyframes vl-tm-eq { 0%,100% { height: 28%; } 50% { height: 100%; } }\n@keyframes vl-tm-prog { from { width: 0; } to { width: 100%; } }\n\n\/* \u2500\u2500 Panel de reuni\u00f3n estilo Notion (PASO 3) \u2500\u2500 *\/\n.vl-tm-notion {\n  position: relative;\n  background: #FFFFFF;\n  border: 1px solid #E8E8E8;\n  border-radius: 16px;\n  box-shadow: 0 14px 40px -12px rgba(0,0,0,0.16);\n  overflow: hidden;\n  max-width: 500px; margin: 0 auto;\n  display: flex; flex-direction: column;\n  min-height: 420px;\n}\n\/* Barra de propietario \u2014 indica que la documentaci\u00f3n es de un compa\u00f1ero *\/\n.vl-tm-notion-owner {\n  display: flex; align-items: center; gap: 8px;\n  padding: 9px 16px;\n  background: #FAFAFA;\n  border-bottom: 1px solid #F0F0F0;\n}\n.vl-tm-owner-back { color: #B0B0B0; font-size: 14px; flex-shrink: 0; }\n.vl-tm-owner-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n.vl-tm-owner-text { font-size: 11px; color: #6E6E6E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.vl-tm-owner-text b { color: #161616; font-weight: 700; }\n.vl-tm-owner-tag { margin-left: auto; flex-shrink: 0; font-size: 9px; font-weight: 700; color: #5E6B17; background: #EEF4D6; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }\n.vl-tm-notion-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 18px; border-bottom: 1px solid #F0F0F0;\n}\n.vl-tm-notion-title { font-size: 13.5px; font-weight: 700; color: #161616; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.vl-tm-notion-play {\n  flex-shrink: 0;\n  display: inline-flex; align-items: center; gap: 7px;\n  background: #161616; color: #FFFFFF;\n  font-size: 11px; font-weight: 700;\n  padding: 6px 12px 6px 9px; border-radius: 9999px;\n  cursor: pointer; transition: background 0.2s ease;\n}\n.vl-tm-notion-play:hover { background: #2C2C2C; }\n\/* icono play\/pausa blanco (sin amarillo) *\/\n.vl-tm-notion-play .vl-tm-playicon { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; color: #161616; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.vl-tm-ic-pause { display: none; }\n.vl-tm-notion-play.is-playing .vl-tm-ic-play { display: none; }\n.vl-tm-notion-play.is-playing .vl-tm-ic-pause { display: block; }\n\/* reproductor minimalista INLINE: al reproducir, el label desaparece y sale la l\u00ednea de tiempo *\/\n.vl-tm-mini { display: none; align-items: center; gap: 8px; }\n.vl-tm-notion-play.is-playing .vl-tm-play-label { display: none; }\n.vl-tm-notion-play.is-playing .vl-tm-mini { display: flex; }\n.vl-tm-mini-track { position: relative; width: 70px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.28); }\n.vl-tm-mini-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #FFFFFF; border-radius: 2px; }\n.vl-tm-notion-play.is-playing .vl-tm-mini-fill { animation: vl-tm-seek 9s linear forwards; }\n.vl-tm-mini-dot { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }\n.vl-tm-notion-play.is-playing .vl-tm-mini-dot { animation: vl-tm-seekdot 9s linear forwards; }\n.vl-tm-mini-time { font-size: 10px; color: rgba(255,255,255,0.85); flex-shrink: 0; font-variant-numeric: tabular-nums; }\n@keyframes vl-tm-seek { from { width: 0; } to { width: 100%; } }\n@keyframes vl-tm-seekdot { from { left: 0; } to { left: 100%; } }\n\n.vl-tm-notion-body { flex: 1; padding: 15px 18px; overflow: hidden; }\n.vl-tm-report-section + .vl-tm-report-section { margin-top: 12px; }\n.vl-tm-report-h {\n  font-size: 11.5px; font-weight: 800; color: #161616; margin: 0 0 4px;\n  opacity: 0; transform: translateY(6px);\n}\n.vl-tm-report-p {\n  font-size: 10.5px; line-height: 1.5; color: #555; margin: 0;\n  opacity: 0; transform: translateY(6px);\n}\n.vl-tm.is-visible .vl-tm-report-h,\n.vl-tm.is-visible .vl-tm-report-p { animation: vl-tm-fadeup 0.5s ease-out forwards; }\n.vl-tm.is-visible .vl-tm-report-section:nth-child(1) .vl-tm-report-h { animation-delay: 0.3s; }\n.vl-tm.is-visible .vl-tm-report-section:nth-child(1) .vl-tm-report-p { animation-delay: 0.4s; }\n.vl-tm.is-visible .vl-tm-report-section:nth-child(2) .vl-tm-report-h { animation-delay: 0.55s; }\n.vl-tm.is-visible .vl-tm-report-section:nth-child(2) .vl-tm-report-p { animation-delay: 0.65s; }\n\/* Override forzado contra Astra: el tema aplica .entry-content p { font-size:18px }\n   y .entry-content h6 { tama\u00f1o heading }, que ganan a mi selector base. Necesario\n   !important + mayor especificidad para que el informe quede compacto. *\/\n.vl-landing .vl-tm .vl-tm-report-h { font-size: 11.5px !important; line-height: 1.3 !important; margin: 0 0 4px !important; font-family: inherit !important; }\n.vl-landing .vl-tm .vl-tm-report-p { font-size: 10.5px !important; line-height: 1.5 !important; margin: 0 !important; }\n.vl-landing .vl-tm .vl-tm-ai-answer { font-size: 10.5px !important; }\n.vl-landing .vl-tm .vl-tm-chatbox-text { font-size: 11px !important; }\n\n\/* caja de chat *\/\n.vl-tm-chatbox {\n  margin: 0 14px 14px; padding: 4px 4px 4px 14px;\n  display: flex; align-items: center; gap: 8px;\n  background: #F4F4F4; border: 1px solid #E6E6E6; border-radius: 9999px;\n}\n.vl-tm-chatbox-text { flex: 1; font-size: 11px; color: #9A9A9A; white-space: nowrap; overflow: hidden; }\n.vl-tm-chatbox-text .vl-tm-caret { display: inline-block; width: 1px; background: #161616; margin-left: 1px; animation: vl-tm-blink 1s step-end infinite; }\n.vl-tm-chatbox-send { width: 30px; height: 30px; border-radius: 50%; background: #161616; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n\/* respuesta IA que aparece *\/\n.vl-tm-ai-answer {\n  margin: 0 18px; padding: 0;\n  max-height: 0; overflow: hidden;\n  font-size: 10.5px; line-height: 1.5; color: #2A2A2A;\n  transition: max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease;\n}\n.vl-tm-ai-answer.is-open { max-height: 120px; padding: 11px 13px; margin: 0 18px 12px; background: #F6FBE6; border: 1px solid #E2EF9E; border-radius: 10px; }\n.vl-tm-ai-answer-label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: #5E6B17; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }\n\n@keyframes vl-tm-fadeup { to { opacity: 1; transform: translateY(0); } }\n@keyframes vl-tm-fadein { to { opacity: 1; transform: translateX(0); } }\n@keyframes vl-tm-wave { 0%,100% { height: 25%; } 50% { height: 90%; } }\n@keyframes vl-tm-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }\n\n@media (max-width: 600px) {\n  .vl-tm-card, .vl-tm-notion { max-width: 100%; }\n  .vl-tm-stat-num { font-size: 19px; }\n  .vl-tm-plot { height: 130px; }\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<\/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 vl-h1-balance\">\n            Dirige tu equipo de selecci\u00f3n con datos, no con corazonadas.<br>\n            <span style=\"color:#6E6E6E;\">Toda la actividad de tus recruiters, en un solo panel.<\/span>\n          <\/h1>\n\n          <p style=\"font-size:20px;color:#424242;max-width:620px;\" class=\"vl-mb-32\">\n            Mide cu\u00e1ntas entrevistas hace cada recruiter, escucha sus llamadas, revisa sus informes y asegura la calidad de todo tu equipo \u2014 sin asistir a cada proceso.\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              Empieza gratis\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          <div class=\"vl-tm vl-tm-card vl-tm-hero\" data-tm-mock>\n\n            <!-- Cabecera de producto -->\n            <div class=\"vl-tm-head\">\n              <div class=\"vl-tm-logo\">\n                <svg width=\"20\" height=\"12\" viewBox=\"0 0 90.23 54.17\" fill=\"#FFFFFF\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M72.18,36.11v-18h-18v18c-8.6,0-12.93-5.21-19.84-14.43C27.06,12,18.05,0,0,0V18.07c8.6,0,12.93,5.22,19.84,14.43,7.24,9.65,16.25,21.67,34.3,21.67V36.11ZM90.23,0h-18v18h18Z\"\/><\/svg>\n              <\/div>\n              <span class=\"vl-tm-head-title\">Voicit Team<\/span>\n              <span class=\"vl-tm-head-action\" data-tm-export>\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3v12m0 0l-4-4m4 4l4-4M4 21h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n                Exportar m\u00e9tricas\n              <\/span>\n            <\/div>\n\n            <!-- Lista de compa\u00f1eros con m\u00e9tricas -->\n            <div class=\"vl-tm-roster\">\n              <div class=\"vl-tm-roster-cols\">\n                <span>4 consultores<\/span>\n                <span>Este mes<\/span>\n                <span>Permisos<\/span>\n              <\/div>\n\n              <div class=\"vl-tm-member\">\n                <div class=\"vl-tm-member-id\">\n                  <img class=\"vl-tm-avatar\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/laura-pena-candidata.webp\" alt=\"Ana Ruiz\" loading=\"lazy\" decoding=\"async\"\/>\n                  <div style=\"min-width:0;\">\n                    <div class=\"vl-tm-member-name\">Ana Ruiz<\/div>\n                    <div class=\"vl-tm-member-sub\">ana@voicit.com<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"vl-tm-member-num\">12<small>informes<\/small><\/div>\n                <div class=\"vl-tm-badge\">Admin<\/div>\n              <\/div>\n\n              <div class=\"vl-tm-member\">\n                <div class=\"vl-tm-member-id\">\n                  <img class=\"vl-tm-avatar\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/javier-ruiz-candidato.webp\" alt=\"David Torres\" loading=\"lazy\" decoding=\"async\"\/>\n                  <div style=\"min-width:0;\">\n                    <div class=\"vl-tm-member-name\">David Torres<\/div>\n                    <div class=\"vl-tm-member-sub\">david@voicit.com<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"vl-tm-member-num\">9<small>informes<\/small><\/div>\n                <div class=\"vl-tm-badge\">Admin<\/div>\n              <\/div>\n\n              <div class=\"vl-tm-member\">\n                <div class=\"vl-tm-member-id\">\n                  <img class=\"vl-tm-avatar\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/carlos-torres-candidato.webp\" alt=\"Carlos M\u00e9ndez\" loading=\"lazy\" decoding=\"async\"\/>\n                  <div style=\"min-width:0;\">\n                    <div class=\"vl-tm-member-name\">Carlos M\u00e9ndez<\/div>\n                    <div class=\"vl-tm-member-sub\">carlos@voicit.com<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"vl-tm-member-num\">15<small>informes<\/small><\/div>\n                <div class=\"vl-tm-badge vl-tm-badge--member\">Miembro<\/div>\n              <\/div>\n\n              <div class=\"vl-tm-member\">\n                <div class=\"vl-tm-member-id\">\n                  <img class=\"vl-tm-avatar\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/maria-garcia-candidata-v2.webp\" alt=\"Luc\u00eda Fern\u00e1ndez\" loading=\"lazy\" decoding=\"async\"\/>\n                  <div style=\"min-width:0;\">\n                    <div class=\"vl-tm-member-name\">Luc\u00eda Fern\u00e1ndez<\/div>\n                    <div class=\"vl-tm-member-sub\">lucia@voicit.com<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"vl-tm-member-num\">7<small>informes<\/small><\/div>\n                <div class=\"vl-tm-badge vl-tm-badge--member\">Miembro<\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Toast de exportaci\u00f3n -->\n            <div class=\"vl-tm-toast\" data-tm-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>Excel descargado<\/span>\n            <\/div>\n\n          <\/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       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 vl-h2-balance\">Tener el control de tu equipo de selecci\u00f3n <br class=\"vl-br-desktop\">no deber\u00eda exigir estar en cada entrevista<\/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-pain-card vl-card--pain-1 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\">Cero visibilidad de la productividad<\/h3>\n          <p class=\"text-small\">No sabes cu\u00e1ntas entrevistas hace cada recruiter ni cu\u00e1nto dedica a cada candidato.<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Pain 2 -->\n        <div class=\"vl-card vl-card--pain vl-pain-card vl-card--pain-2 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\">Informes y audios dispersos<\/h3>\n          <p class=\"text-small\">Los audios e informes de cada entrevista quedan dispersos y revisarlos te cuesta tiempo.<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Pain 3 -->\n        <div class=\"vl-card vl-card--pain vl-pain-card vl-card--pain-3 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=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/icon-eye-mercado.png\" alt=\"Ojo: visibilidad del mercado\" width=\"32\" height=\"32\"><\/div>\n          <h3 class=\"vl-mb-8\">Calidad dif\u00edcil de garantizar<\/h3>\n          <p class=\"text-small\">No puedes asistir a todas las entrevistas de tu equipo para asegurar la calidad de cada una.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       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    <!-- Titulo en flujo normal SOLO para movil\/tablet -->\n    <div class=\"vl-ssteps-mtitle vl-container\">\n      <h2 style=\"margin:0 auto;\">El control de tu equipo de selecci\u00f3n, en 3 pasos<\/h2>\n    <\/div>\n\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;max-width:720px;\">El control de tu equipo de selecci\u00f3n, en 3 pasos<\/h2>\n          <\/div>\n\n          <!-- Indicador de progreso -->\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 segun 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>Dashboard centralizado de tu equipo<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Visi\u00f3n global de tus consultores: entrevistas, duraci\u00f3n media, informes y usuarios activos, mes a mes.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Filtra por cada compa\u00f1ero y compara su actividad. KPIs de selecci\u00f3n en tiempo real, sin pedirle nada a nadie.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <div class=\"vl-tm\" data-tm-mock>\n            <div class=\"vl-tm-graph\" data-tm-graph>\n              <!-- Leyenda con toggles -->\n              <div class=\"vl-tm-graph-legend\">\n                <span class=\"vl-tm-chip\" data-tm-series=\"reports\"><span class=\"vl-tm-chip-swatch vl-tm-chip-swatch--reports\"><\/span>Total Informes<\/span>\n                <span class=\"vl-tm-chip\" data-tm-series=\"users\"><span class=\"vl-tm-chip-swatch vl-tm-chip-swatch--users\"><\/span>Usuarios Activos<\/span>\n              <\/div>\n\n              <!-- Zona del gr\u00e1fico -->\n              <div class=\"vl-tm-plot\">\n                <div class=\"vl-tm-yaxis\"><span>60<\/span><span>30<\/span><span>0<\/span><\/div>\n                <div class=\"vl-tm-gridline\" style=\"top:0;\"><\/div>\n                <div class=\"vl-tm-gridline\" style=\"top:50%;\"><\/div>\n\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:63%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:9%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Oct 2025<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 38<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 3<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:78%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:6%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Nov 2025<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 47<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 2<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:38%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:9%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Dic 2025<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 23<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 3<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:48%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:6%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Ene 2026<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 29<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 2<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:30%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:9%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Feb 2026<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 18<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 3<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:68%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:12%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Mar 2026<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 41<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 4<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup is-active\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:37%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:9%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">Abr 2026<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 22<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 3<\/div><\/div>\n                <\/div>\n                <div class=\"vl-tm-bargroup\">\n                  <span class=\"vl-tm-bar vl-tm-bar--reports\" style=\"--h:10%;\"><\/span>\n                  <span class=\"vl-tm-bar vl-tm-bar--users\" style=\"--h:4%;\"><\/span>\n                  <div class=\"vl-tm-tip\"><div class=\"vl-tm-tip-title\">May 2026<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--reports\"><\/span>Total Informes: 6<\/div><div class=\"vl-tm-tip-row\"><span class=\"vl-tm-tip-dot vl-tm-chip-swatch--users\"><\/span>Usuarios Activos: 1<\/div><\/div>\n                <\/div>\n              <\/div>\n              <div class=\"vl-tm-xaxis\"><span>Oct<\/span><span>Nov<\/span><span>Dic<\/span><span>Ene<\/span><span>Feb<\/span><span>Mar<\/span><span>Abr<\/span><span>May<\/span><\/div>\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>M\u00e9tricas y actividad por recruiter<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Entra en el perfil de cualquier persona del equipo y mira sus n\u00fameros: duraci\u00f3n media, entrevistas grabadas e informes generados, con cada reuni\u00f3n a un clic.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Identifica al instante qui\u00e9n tiene m\u00e1s carga o d\u00f3nde bajar el ritmo. Decisiones basadas en datos, no en sensaciones.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <div class=\"vl-tm vl-tm-card\" data-tm-mock>\n\n            <!-- Barra de perfil -->\n            <div class=\"vl-tm-profile-bar\">\n              <span class=\"vl-tm-profile-back\">\u2039<\/span>\n              <img class=\"vl-tm-avatar\" style=\"width:30px;height:30px;\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/laura-pena-candidata.webp\" alt=\"Ana Ruiz\" loading=\"lazy\" decoding=\"async\"\/>\n              <div style=\"flex:1;min-width:0;\">\n                <div class=\"vl-tm-member-name\">Ana Ruiz<\/div>\n                <div class=\"vl-tm-member-sub\">Equipo de selecci\u00f3n \u00b7 Mayo 2026<\/div>\n              <\/div>\n            <\/div>\n\n            <!-- 3 indicadores -->\n            <div class=\"vl-tm-stats\">\n              <div class=\"vl-tm-stat\"><div class=\"vl-tm-stat-num\">48<span style=\"font-size:12px;font-weight:600;\"> min<\/span><\/div><div class=\"vl-tm-stat-label\">Duraci\u00f3n media<\/div><\/div>\n              <div class=\"vl-tm-stat\"><div class=\"vl-tm-stat-num\">7<\/div><div class=\"vl-tm-stat-label\">Grabadas<\/div><\/div>\n              <div class=\"vl-tm-stat\"><div class=\"vl-tm-stat-num\">4<\/div><div class=\"vl-tm-stat-label\">Informes<\/div><\/div>\n            <\/div>\n\n            <!-- Lista de reuniones -->\n            <div class=\"vl-tm-meetings\">\n              <div class=\"vl-tm-meeting\">\n                <span class=\"vl-tm-meeting-name\">Entrevista \u2014 Account Manager<\/span>\n                <span class=\"vl-tm-meeting-dur\">32 min<\/span>\n                <span class=\"vl-tm-meeting-report\" title=\"Informe generado\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#1F7D34\" stroke-width=\"1.8\"\/><path d=\"M8 12l3 3 5-6\" stroke=\"#1F7D34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                <span class=\"vl-tm-play\" data-tm-rowplay><svg class=\"vl-tm-play-tri\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><span class=\"vl-tm-eq\"><i><\/i><i><\/i><i><\/i><\/span><\/span>\n                <span class=\"vl-tm-progress\"><\/span>\n              <\/div>\n              <div class=\"vl-tm-meeting\">\n                <span class=\"vl-tm-meeting-name\">Entrevista \u2014 Project Manager<\/span>\n                <span class=\"vl-tm-meeting-dur\">45 min<\/span>\n                <span class=\"vl-tm-meeting-report\" title=\"Informe generado\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#1F7D34\" stroke-width=\"1.8\"\/><path d=\"M8 12l3 3 5-6\" stroke=\"#1F7D34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                <span class=\"vl-tm-play\" data-tm-rowplay><svg class=\"vl-tm-play-tri\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><span class=\"vl-tm-eq\"><i><\/i><i><\/i><i><\/i><\/span><\/span>\n                <span class=\"vl-tm-progress\"><\/span>\n              <\/div>\n              <div class=\"vl-tm-meeting\">\n                <span class=\"vl-tm-meeting-name\">Criba telef\u00f3nica \u2014 Comercial<\/span>\n                <span class=\"vl-tm-meeting-dur\">12 min<\/span>\n                <span class=\"vl-tm-meeting-report\" title=\"Solo audio\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#C4C4C4\" stroke-width=\"1.8\"\/><path d=\"M9 9l6 6M15 9l-6 6\" stroke=\"#C4C4C4\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg><\/span>\n                <span class=\"vl-tm-play\" data-tm-rowplay><svg class=\"vl-tm-play-tri\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><span class=\"vl-tm-eq\"><i><\/i><i><\/i><i><\/i><\/span><\/span>\n                <span class=\"vl-tm-progress\"><\/span>\n              <\/div>\n              <div class=\"vl-tm-meeting\">\n                <span class=\"vl-tm-meeting-name\">Entrevista final \u2014 Controller<\/span>\n                <span class=\"vl-tm-meeting-dur\">27 min<\/span>\n                <span class=\"vl-tm-meeting-report\" title=\"Informe generado\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#1F7D34\" stroke-width=\"1.8\"\/><path d=\"M8 12l3 3 5-6\" stroke=\"#1F7D34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n                <span class=\"vl-tm-play\" data-tm-rowplay><svg class=\"vl-tm-play-tri\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><span class=\"vl-tm-eq\"><i><\/i><i><\/i><i><\/i><\/span><\/span>\n                <span class=\"vl-tm-progress\"><\/span>\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>Cada entrevista, con su informe, audio y resumen de IA<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Abre cualquier entrevista documentada por tu equipo: lee el informe del candidato, escucha la conversaci\u00f3n original o preg\u00fantale a la IA. Control de calidad sin asistir al proceso.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Como si hubieras estado en la sala, pero sin invertir el tiempo. Audita la calidad de decenas de entrevistas en minutos.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <div class=\"vl-tm\" data-tm-mock>\n            <div class=\"vl-tm-notion\">\n\n              <!-- Barra de propietario: deja claro que entras en la cuenta de un compa\u00f1ero -->\n              <div class=\"vl-tm-notion-owner\">\n                <span class=\"vl-tm-owner-back\">\u2039<\/span>\n                <img class=\"vl-tm-owner-av\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/javier-ruiz-candidato.webp\" alt=\"David Torres\" loading=\"lazy\" decoding=\"async\"\/>\n                <span class=\"vl-tm-owner-text\">Repositorio de <b>David Torres<\/b><\/span>\n                <span class=\"vl-tm-owner-tag\">Tu compa\u00f1ero<\/span>\n              <\/div>\n\n              <!-- Cabecera: t\u00edtulo + reproductor minimalista inline -->\n              <div class=\"vl-tm-notion-head\">\n                <span class=\"vl-tm-notion-title\">Entrevista a Marta Gil<\/span>\n                <span class=\"vl-tm-notion-play\" data-tm-play>\n                  <span class=\"vl-tm-playicon\">\n                    <svg class=\"vl-tm-ic-play\" width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n                    <svg class=\"vl-tm-ic-pause\" width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6 5h4v14H6zM14 5h4v14h-4z\"\/><\/svg>\n                  <\/span>\n                  <span class=\"vl-tm-play-label\">Escuchar audio<\/span>\n                  <span class=\"vl-tm-mini\">\n                    <span class=\"vl-tm-mini-track\"><span class=\"vl-tm-mini-fill\"><\/span><span class=\"vl-tm-mini-dot\"><\/span><\/span>\n                    <span class=\"vl-tm-mini-time\">02:14<\/span>\n                  <\/span>\n                <\/span>\n              <\/div>\n\n              <!-- Cuerpo del informe (candidato entrevistado por un compa\u00f1ero) -->\n              <div class=\"vl-tm-notion-body\">\n                <div class=\"vl-tm-report-section\">\n                  <h6 class=\"vl-tm-report-h\">Resumen del candidato<\/h6>\n                  <p class=\"vl-tm-report-p\">Marta Gil, 6 a\u00f1os como desarrolladora backend (Java y Python). Entrevistada por David Torres. Comunicaci\u00f3n clara y alto encaje cultural con el equipo.<\/p>\n                <\/div>\n                <div class=\"vl-tm-report-section\">\n                  <h6 class=\"vl-tm-report-h\">Valoraci\u00f3n<\/h6>\n                  <p class=\"vl-tm-report-p\">Nivel t\u00e9cnico s\u00f3lido, sobre todo en arquitectura de microservicios. Falta validar experiencia liderando equipos. Recomendaci\u00f3n: pasar a segunda fase.<\/p>\n                <\/div>\n              <\/div>\n\n              <!-- Respuesta IA (aparece tras \"escribir\" en el chat) -->\n              <div class=\"vl-tm-ai-answer\" data-tm-answer>\n                <div class=\"vl-tm-ai-answer-label\"><svg width=\"13\" height=\"9\" viewBox=\"0 0 90.23 54.17\" fill=\"#5E6B17\"><path d=\"M72.18,36.11v-18h-18v18c-8.6,0-12.93-5.21-19.84-14.43C27.06,12,18.05,0,0,0V18.07c8.6,0,12.93,5.22,19.84,14.43,7.24,9.65,16.25,21.67,34.3,21.67V36.11ZM90.23,0h-18v18h18Z\"\/><\/svg> Respuesta IA<\/div>\n                David la valora con un 8,5\/10: muy fuerte en backend y microservicios, con margen de mejora en gesti\u00f3n de equipos. La recomienda para segunda fase.\n              <\/div>\n\n              <!-- Caja de chat -->\n              <div class=\"vl-tm-chatbox\">\n                <span class=\"vl-tm-chatbox-text\" data-tm-chat>\u00bfQu\u00e9 valoraci\u00f3n le dio David a la candidata?<\/span>\n                <span class=\"vl-tm-chatbox-send\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14m-6-6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n              <\/div>\n\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n          <\/div><!-- \/vl-ssteps-stage -->        <\/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-perfiles\" 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\">Para cada responsable de un equipo de selecci\u00f3n<\/h2>\n      <\/div>\n\n<div class=\"vl-segflow vl-reveal\">\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"11\" cy=\"10\" r=\"4.5\" fill=\"#1A171B\"\/><circle cx=\"22\" cy=\"11\" r=\"3.8\" fill=\"#1A171B\"\/><path d=\"M3 27v-2c0-3.6 3.4-6 8-6s8 2.4 8 6v2H3z\" fill=\"#1A171B\"\/><path d=\"M20 27v-2c0-1.7-.5-3.1-1.4-4.2 1-.5 2.2-.8 3.4-.8 3.9 0 7 2 7 5.2V27h-9z\" fill=\"#1A171B\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Directores de RRHH<\/span>\n          <span class=\"vl-seg-desc\">Visi\u00f3n global del rendimiento de tu departamento y control de calidad sin entrar en cada proceso.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2\" stroke=\"#1A171B\" stroke-width=\"2.5\" fill=\"none\"\/><rect x=\"3\" y=\"9\" width=\"26\" height=\"18\" rx=\"2\" fill=\"#1A171B\"\/><rect x=\"13\" y=\"16\" width=\"6\" height=\"3\" rx=\"0.5\" fill=\"#FFFFFF\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Managers de selecci\u00f3n<\/span>\n          <span class=\"vl-seg-desc\">Supervisa a tu equipo de recruiters: entrevistas por persona, duraci\u00f3n media e informes generados.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"13\" cy=\"13\" r=\"8\" stroke=\"#1A171B\" stroke-width=\"3\" fill=\"none\"\/><path d=\"M19 19l8 8\" stroke=\"#1A171B\" stroke-width=\"3\" stroke-linecap=\"round\"\/><circle cx=\"13\" cy=\"11\" r=\"2.4\" fill=\"#1A171B\"\/><path d=\"M8.5 17c0-1.7 2-2.8 4.5-2.8s4.5 1.1 4.5 2.8\" stroke=\"#1A171B\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Headhunters con equipo<\/span>\n          <span class=\"vl-seg-desc\">Escucha las entrevistas de tus consultores y asegura el nivel en cada b\u00fasqueda ejecutiva.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-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-seg-label\">Consultoras de selecci\u00f3n<\/span>\n          <span class=\"vl-seg-desc\">Estandariza la calidad de todo el equipo y demuestra a tus clientes el rigor de cada proceso.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"6\" y=\"3\" width=\"20\" height=\"26\" rx=\"1.5\" fill=\"#1A171B\"\/><rect x=\"10\" y=\"7\" width=\"3.5\" height=\"3.5\" fill=\"#FFFFFF\"\/><rect x=\"18.5\" y=\"7\" width=\"3.5\" height=\"3.5\" fill=\"#FFFFFF\"\/><rect x=\"10\" y=\"13\" width=\"3.5\" height=\"3.5\" fill=\"#FFFFFF\"\/><rect x=\"18.5\" y=\"13\" width=\"3.5\" height=\"3.5\" fill=\"#FFFFFF\"\/><rect x=\"10\" y=\"19\" width=\"3.5\" height=\"3.5\" fill=\"#FFFFFF\"\/><rect x=\"18.5\" y=\"19\" width=\"3.5\" height=\"3.5\" fill=\"#FFFFFF\"\/><rect x=\"13.5\" y=\"24.5\" width=\"5\" height=\"4.5\" fill=\"#FFFFFF\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Departamentos de RRHH internos<\/span>\n          <span class=\"vl-seg-desc\">Mide la actividad de tus recruiters in-house y centraliza los informes de cada entrevista.<\/span>\n        <\/div>\n        <p class=\"vl-seg-caption\" id=\"vl-seg-cap\"><\/p>      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIAL\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIOS (4 clientes reales RRHH)\n       Las fotos est\u00e1n como iniciales \u2014 sustituir por LinkedIn \/ Google\n       cuando el cliente d\u00e9 permiso. URLs LinkedIn al final de cada bloque.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt vl-tstack-section\" style=\"padding:0;\">\n    <div class=\"vl-tstack-track\">\n      <div class=\"vl-tstack-sticky\">\n            <div class=\"vl-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        <div class=\"vl-container\">\n\n          <div class=\"vl-text-center\" style=\"margin-bottom:90px;\">\n            <h2 class=\"vl-mb-16\">Responsables de selecci\u00f3n que ya dirigen con datos<\/h2>\n          <\/div>\n\n          <div class=\"vl-tstack-cards\">\n\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                Antes valorar la calidad del trabajo de mi equipo era una sensaci\u00f3n; ahora es un dato. Reviso los informes y escucho las entrevistas de cada persona cuando lo necesito, en un solo panel.\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                Puedo asegurar a nuestros clientes el mismo nivel en todos los procesos. Ver las m\u00e9tricas de cada recruiter en un panel nos ha cambiado la forma de dirigir la consultora.\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 cambio que se nota en c\u00f3mo diriges tu equipo<\/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\">Sin Voicit<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Pides los informes y audios a cada recruiter uno a uno<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>No sabes cu\u00e1ntas entrevistas hace cada persona<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Conf\u00edas en la calidad de las entrevistas a ciegas<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Flecha de transformaci\u00f3n (visible solo en desktop) -->\n        <div class=\"vl-compare-arrow\" aria-hidden=\"true\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\n            <path d=\"M6 16h20m-6-6l6 6-6 6\" stroke=\"#9A9A9A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Card \"Ahora\" -->\n        <div class=\"vl-compare-card vl-compare-card--after\">\n          <span class=\"vl-compare-label\">Ahora<\/span>\n          <h3 class=\"vl-compare-title\">Con Voicit<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Toda la actividad del equipo en un solo panel<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>M\u00e9tricas por recruiter en tiempo real<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Informe, audio y resumen de IA de cada entrevista<\/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 (tarjeta oscura con scroll-jack)\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;\">Toma el control de tu equipo de selecci\u00f3n.<\/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              Empieza gratis\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>\n          <summary>\u00bfC\u00f3mo superviso el trabajo de mi equipo de recruiters sin asistir a cada entrevista?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Cada consultor documenta sus entrevistas en Voicit y t\u00fa accedes a todo desde un panel central: el audio de la conversaci\u00f3n, el informe del candidato y un resumen de IA. Puedes revisar cualquier proceso cuando quieras, sin haber estado en la sala ni pedirle nada a nadie.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfQu\u00e9 m\u00e9tricas puedo ver de cada recruiter?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Ves las entrevistas realizadas, la duraci\u00f3n media de cada una, los informes generados y los usuarios activos, con la evoluci\u00f3n mes a mes. Puedes entrar en el perfil de cualquier persona para comparar su actividad y detectar qui\u00e9n tiene m\u00e1s carga o d\u00f3nde reforzar. Son KPIs de selecci\u00f3n reales, no estimaciones.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfPuedo escuchar las entrevistas y leer los informes de mi equipo?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Entras en cualquier entrevista de tu equipo y tienes el audio original, la transcripci\u00f3n y el <a href=\"https:\/\/voicit.com\/plantillas-informes-candidatos\/\">informe de candidato<\/a> generado por Voicit. Incluso puedes preguntarle a la IA sobre la conversaci\u00f3n. Es el control de calidad de un proceso completo, sin dedicarle horas.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfSirve para un departamento de RRHH interno o solo para consultoras?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Para ambos. Lo usan managers de consultoras de selecci\u00f3n y de headhunting con equipo, y tambi\u00e9n responsables de departamentos de RRHH internos que dirigen a un equipo de recruiters. Si gestionas a varias personas que entrevistan, Voicit te da la visibilidad y el control que necesitas para dirigir con datos.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfEs compatible con el RGPD grabar y almacenar las entrevistas del equipo?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Voicit cumple el RGPD: los datos se alojan en servidores de la UE y cada candidato debe dar su consentimiento antes de grabar. La grabaci\u00f3n y el resumen de las entrevistas funcionan igual que en <a href=\"https:\/\/voicit.com\/graba-transcribe-y-resume-tus-reuniones-con-ia\/\">nuestra herramienta de reuniones con IA<\/a>, con los mismos est\u00e1ndares de seguridad para todo tu equipo.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfCu\u00e1nto cuesta gestionar mi equipo de selecci\u00f3n con 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>. Cada recruiter documenta sus entrevistas y t\u00fa diriges al equipo desde el panel; si adem\u00e1s quieres colocar a tus candidatos, tienes el <a href=\"https:\/\/voicit.com\/buscador-oportunidades-laborales\/\">buscador de oportunidades<\/a>.<\/p>\n          <\/div>\n        <\/details>\n      <\/div>\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\": \"Gesti\u00f3n de equipos de selecci\u00f3n \u2014 Voicit\",\n  \"url\": \"https:\/\/voicit.com\/gestion-equipos-seleccion\/\",\n  \"description\": \"Dirige tu equipo de selecci\u00f3n con datos: mide la actividad de cada recruiter, escucha las entrevistas, revisa sus informes y asegura la calidad de todo el equipo desde un solo panel. Para directores de RRHH, managers de selecci\u00f3n, headhunters y consultoras.\",\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<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfC\u00f3mo superviso el trabajo de mi equipo de recruiters sin asistir a cada entrevista?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Cada consultor documenta sus entrevistas en Voicit y t\u00fa accedes a todo desde un panel central: el audio de la conversaci\u00f3n, el informe del candidato y un resumen de IA. Puedes revisar cualquier proceso cuando quieras, sin haber estado en la sala.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfQu\u00e9 m\u00e9tricas puedo ver de cada recruiter?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Entrevistas realizadas, duraci\u00f3n media, informes generados y usuarios activos, con evoluci\u00f3n mes a mes. Puedes entrar en el perfil de cada persona para comparar su actividad. Son KPIs de selecci\u00f3n reales.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfPuedo escuchar las entrevistas y leer los informes de mi equipo?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"S\u00ed. Entras en cualquier entrevista del equipo y tienes el audio original, la transcripci\u00f3n y el informe de candidato generado por Voicit, e incluso puedes preguntarle a la IA sobre la conversaci\u00f3n.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfSirve para un departamento de RRHH interno o solo para consultoras?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Para ambos. Lo usan managers de consultoras de selecci\u00f3n y de headhunting con equipo, y tambi\u00e9n responsables de departamentos de RRHH internos que dirigen a un equipo de recruiters.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfEs compatible con el RGPD grabar y almacenar las entrevistas del equipo?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"S\u00ed. Voicit cumple el RGPD: los datos se alojan en servidores de la UE y cada candidato da su consentimiento antes de grabar, con los mismos est\u00e1ndares de seguridad para todo el equipo.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfCu\u00e1nto cuesta gestionar mi equipo de selecci\u00f3n con 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<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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:'Buscando ofertas con match\u2026',done:'23 ofertas encontradas',oferta:'La oferta',verOferta:'Ver oferta',resp:'Responsable del proceso',pub:'public\u00f3 la oferta',emp:'Contexto de la empresa',draft:'Generar borrador de mensaje',drafting:'Redactando con el contexto de la empresa\u2026',draftTit:'Borrador para LinkedIn',tipIn:'Ver perfil LinkedIn',tipMail:'Enviar correo',tipTel:'Consultar n\u00famero'},\n      en:{gen:'Searching for matching offers\u2026',done:'23 offers found',oferta:'The role',verOferta:'View role',resp:'Process owner',pub:'posted the role',emp:'Company context',draft:'Generate message draft',drafting:'Writing with the company context\u2026',draftTit:'LinkedIn draft',tipIn:'View LinkedIn profile',tipMail:'Send email',tipTel:'See phone number'},\n      fr:{gen:'Recherche d\\'offres compatibles\u2026',done:'23 offres trouv\u00e9es',oferta:'Le poste',verOferta:'Voir le poste',resp:'Responsable du processus',pub:'a publi\u00e9 le poste',emp:'Contexte de l\\'entreprise',draft:'G\u00e9n\u00e9rer un brouillon',drafting:'R\u00e9daction avec le contexte\u2026',draftTit:'Brouillon LinkedIn',tipIn:'Voir le profil LinkedIn',tipMail:'Envoyer un e-mail',tipTel:'Voir le num\u00e9ro'},\n      de:{gen:'Passende Angebote werden gesucht\u2026',done:'23 Angebote gefunden',oferta:'Die Stelle',verOferta:'Stelle ansehen',resp:'Prozessverantwortliche\/r',pub:'hat die Stelle ver\u00f6ffentlicht',emp:'Unternehmenskontext',draft:'Nachrichtenentwurf erstellen',drafting:'Wird mit dem Kontext verfasst\u2026',draftTit:'LinkedIn-Entwurf',tipIn:'LinkedIn-Profil ansehen',tipMail:'E-Mail senden',tipTel:'Nummer ansehen'},\n      it:{gen:'Ricerca di offerte compatibili\u2026',done:'23 offerte trovate',oferta:'La posizione',verOferta:'Vedi posizione',resp:'Responsabile del processo',pub:'ha pubblicato la posizione',emp:'Contesto aziendale',draft:'Genera bozza di messaggio',drafting:'Scrittura con il contesto\u2026',draftTit:'Bozza LinkedIn',tipIn:'Apri il profilo LinkedIn',tipMail:'Copia l\\'email di contatto',tipTel:'Mostra il telefono diretto'},\n      pt:{gen:'A procurar ofertas compat\u00edveis\u2026',done:'23 ofertas encontradas',oferta:'A oferta',verOferta:'Ver oferta',resp:'Respons\u00e1vel do processo',pub:'publicou a oferta',emp:'Contexto da empresa',draft:'Gerar rascunho de mensagem',drafting:'A redigir com o contexto\u2026',draftTit:'Rascunho de LinkedIn',tipIn:'Ver perfil de LinkedIn',tipMail:'Enviar email',tipTel:'Consultar n\u00famero'},\n      ca:{gen:'Cercant ofertes amb match\u2026',done:'23 ofertes trobades',oferta:'L\\'oferta',verOferta:'Veure oferta',resp:'Responsable del proc\u00e9s',pub:'ha publicat l\\'oferta',emp:'Context de l\\'empresa',draft:'Generar esborrany de missatge',drafting:'Redactant amb el context\u2026',draftTit:'Esborrany de LinkedIn',tipIn:'Veure perfil LinkedIn',tipMail:'Enviar correu',tipTel:'Consultar n\u00famero'}\n    };\n    var l = (document.documentElement.lang||'es').slice(0,2).toLowerCase();\n    return d[l] || d.es;\n  })();\n  window.VLI18N = VLI18N;   \/\/ expuesto: lo usan modulos definidos en otros IIFE (borrador del Paso 3)\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: NO se abre ninguna automaticamente.\n        \/\/ El estado por defecto es el listado completo, contraido y ordenado por match.\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 del detalle de una oportunidad: la oferta + responsable del proceso +\n  \/\/ contexto de la empresa + boton de borrador de mensaje.\n  \/\/ Lee: data-tags, data-offer, data-owner, data-stats, data-context, data-draft\n  function vlEditorOfferDetailHtml(section) {\n    const d = section.dataset;\n    const offerRaw = d.offer   || '';\n    const ownerRaw = d.owner   || '';\n    const statsRaw = d.stats   || '';\n    const context  = d.context || '';\n\n    let offer = '';\n    if (offerRaw) {\n      const o = offerRaw.split('|');\n      offer = `<div class=\"vl-mk-od-block vl-mk-od-block--offer\">\n        <div class=\"vl-mk-od-offer\">\n          <span class=\"vl-mk-od-offer-ico\">\ud83d\udd17<\/span>\n          <div class=\"vl-mk-od-offer-txt\">\n            <div class=\"vl-mk-od-offer-title\">${o[0]}<\/div>\n            <div class=\"vl-mk-od-offer-meta\">${o[1] || ''}<\/div>\n          <\/div>\n          <span class=\"vl-mk-od-offer-cta\">${VLI18N.verOferta}<\/span>\n        <\/div>\n      <\/div>`;\n    }\n\n    let owner = '';\n    if (ownerRaw) {\n      const w = ownerRaw.split('|');\n      owner = `<div class=\"vl-mk-od-block vl-mk-od-block--owner\">\n        <h6 class=\"vl-mk-od-label\">${VLI18N.resp}<\/h6>\n        <div class=\"vl-mk-od-person\">\n          <span class=\"vl-mk-od-avatar\">${w[2] || ''}<\/span>\n          <div class=\"vl-mk-od-person-txt\">\n            <div class=\"vl-mk-od-person-name\">${w[0]}<\/div>\n            <div class=\"vl-mk-od-person-role\">${w[1] || ''}<span class=\"vl-mk-od-pub\"> \u00b7 ${VLI18N.pub}<\/span><\/div>\n          <\/div>\n          <div class=\"vl-mk-od-contact\">\n            <span class=\"vl-mk-od-chip\" data-tip=\"${VLI18N.tipIn}\">in<\/span>\n            <span class=\"vl-mk-od-chip\" data-tip=\"${VLI18N.tipMail}\">\u2709<\/span>\n            <span class=\"vl-mk-od-chip\" data-tip=\"${VLI18N.tipTel}\">\u260e<\/span>\n          <\/div>\n        <\/div>\n      <\/div>`;\n    }\n\n    let company = '';\n    if (statsRaw || context) {\n      const stats = statsRaw ? `<div class=\"vl-mk-od-stats\">${\n        statsRaw.split(';;').map(x => {\n          const v = x.split('|');\n          return `<div class=\"vl-mk-od-stat\"><b>${v[0]}<\/b><span>${v[1] || ''}<\/span><\/div>`;\n        }).join('')\n      }<\/div>` : '';\n      company = `<div class=\"vl-mk-od-block vl-mk-od-block--company\">\n        <h6 class=\"vl-mk-od-label\">${VLI18N.emp}<\/h6>\n        ${stats}\n        ${context ? `<p class=\"vl-mk-od-text\">${context}<\/p>` : ''}\n      <\/div>`;\n    }\n\n    const draft = `<button type=\"button\" class=\"vl-mk-od-draft\" data-vl-draft>\n        <span class=\"vl-mk-od-draft-ico\">\u2728<\/span>${VLI18N.draft}\n      <\/button>\n      <div class=\"vl-mk-od-draftbox\" hidden><\/div>`;\n\n    return `<div class=\"vl-mk-offer-detail\">${offer}${owner}${company}${draft}<\/div>`;\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      body.innerHTML = vlEditorOfferDetailHtml(section);\n      body.dataset.vlPopulated = '1';\n    }\n\n    const openOnes = Array.from(editor.querySelectorAll('.vl-mk-editor-section--open'))\n      .filter(s => s !== section);\n\n    if (openOnes.length > 0) {\n      \/\/ 1) Cerrar la(s) que est\u00e9n abiertas\n      openOnes.forEach(s => s.classList.remove('vl-mk-editor-section--open'));\n      \/\/ 2) Esperar a que termine la transici\u00f3n de colapso, luego abrir la nueva\n      clearTimeout(editor._vlOpenTimer);\n      editor._vlOpenTimer = setTimeout(() => {\n        section.classList.add('vl-mk-editor-section--open');\n      }, 420);\n    } else {\n      \/\/ Nada estaba abierto \u2192 abrir directamente\n      section.classList.add('vl-mk-editor-section--open');\n    }\n  }\n  window.vlEditorOpenSection = vlEditorOpenSection;   \/\/ expuesto: lo usa el modulo del Paso 3 (otro IIFE) para el estado inicial\n\n  \/\/ Cerrar una secci\u00f3n\n  function vlEditorCloseSection(section) {\n    section.classList.remove('vl-mk-editor-section--open');\n  }\n\n  \/\/ Toggle del head: si la secci\u00f3n clicada est\u00e1 abierta la cerramos, si no la abrimos\n\n  \/\/ Auto-scroll a un paso concreto dentro del scroll congelado de la seccion \"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  document.addEventListener('click', (e) => {\n    \/\/ 1) Click en la cabecera de una secci\u00f3n \u2192 toggle accordion\n    const head = e.target.closest('[data-vl-toggle]');\n    if (head) {\n      const section = head.closest('[data-vl-section]');\n      if (section.classList.contains('vl-mk-editor-section--open')) {\n        vlEditorCloseSection(section);\n      } else {\n        vlEditorOpenSection(section);\n      }\n      return;\n    }\n\n    \/\/ 2) Click en un bot\u00f3n de Formato\/Longitud \u2192 cambiar selecci\u00f3n\n    const iconBtn = e.target.closest('.vl-mk-editor-icon-btn');\n    if (iconBtn) {\n      const group = iconBtn.parentElement;\n      group.querySelectorAll('.vl-mk-editor-icon-btn').forEach(b => b.classList.remove('is-active'));\n      iconBtn.classList.add('is-active');\n      return;\n    }\n\n    \/\/ 3) Click en \"Guardar plantilla\" \u2192 pulso + toast\n    const saveBtn = e.target.closest('[data-vl-save]');\n    if (saveBtn) {\n      const editor = saveBtn.closest('.vl-mk-editor');\n      const toast = editor.querySelector('.vl-mk-editor-toast');\n      if (toast) {\n        toast.classList.remove('is-hiding');\n        toast.classList.remove('is-showing');\n        void toast.offsetWidth;\n        toast.classList.add('is-showing');\n\n        clearTimeout(toast._hideTimer);\n        toast._hideTimer = setTimeout(() => {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2200);\n      }\n      return;\n    }\n  });\n\n  \/\/ Filtrar click en el handle del drag para que no dispare el toggle de la secci\u00f3n\n  document.addEventListener('click', (e) => {\n    if (e.target.closest('.vl-mk-editor-drag')) {\n      e.stopPropagation();\n    }\n  }, true);\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MOCKUP PASO 1 \u2014 File picker interactivo\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  document.addEventListener('click', (e) => {\n    \/\/ Click en un archivo PDF \u2192 seleccionarlo\n    const file = e.target.closest('.vl-mk-fp-file');\n    if (file) {\n      const picker = file.closest('.vl-mk-filepicker');\n      if (picker) {\n        picker.querySelectorAll('.vl-mk-fp-file').forEach(f => f.classList.remove('is-selected'));\n        file.classList.add('is-selected');\n        const btn = picker.querySelector('.vl-mk-fp-btn');\n        if (btn) btn.classList.add('is-enabled');\n      }\n      return;\n    }\n\n    \/\/ Click en \"Subir informe\" \u2192 toast desde arriba\n    const upBtn = e.target.closest('[data-vl-upload]');\n    if (upBtn && upBtn.classList.contains('is-enabled')) {\n      const picker = upBtn.closest('.vl-mk-filepicker');\n      const toast = picker?.querySelector('.vl-mk-fp-toast');\n      if (toast) {\n        toast.classList.remove('is-hiding');\n        toast.classList.remove('is-showing');\n        void toast.offsetWidth;\n        toast.classList.add('is-showing');\n        clearTimeout(toast._hideTimer);\n        toast._hideTimer = setTimeout(() => {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2200);\n      }\n      \/\/ Auto-avance al Paso 2 tras lanzar la busqueda\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 busqueda\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 dinamicamente -> hay que inicializarlo\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      const rect = track.getBoundingClientRect();\n      const trackHeight = track.offsetHeight - window.innerHeight;\n      if (trackHeight <= 0) return;\n      let progress = -rect.top \/ trackHeight;\n      progress = Math.max(0, Math.min(1, progress));\n\n      \/\/ El track se divide en N segmentos (uno por card)\n      \/\/ Card N aparece cuando progress >= N\/totalCards\n      \/\/ Card N va a \"estar detr\u00e1s\" cuando hay cards superiores visibles\n      const N = cards.length;\n      \/\/ \u00daltima card visible seg\u00fan progreso\n      \/\/ progress 0    \u2192 1 card visible (H\u00e9ctor)\n      \/\/ progress 0.25 \u2192 2 (H\u00e9ctor + Cristina)\n      \/\/ progress 0.50 \u2192 3 (+ Roberto)\n      \/\/ progress 0.75 \u2192 4 (+ Javier)\n      const topIdx = Math.min(N - 1, Math.floor(progress * N));\n\n      cards.forEach((card, idx) => {\n        card.classList.remove('is-behind-1', 'is-behind-2', 'is-behind-3');\n        if (idx <= topIdx) {\n          card.classList.add('is-visible');\n          \/\/ Si esta card NO es la \u00faltima visible, est\u00e1 detr\u00e1s\n          const depth = topIdx - idx;\n          if (depth === 1) card.classList.add('is-behind-1');\n          else if (depth === 2) card.classList.add('is-behind-2');\n          else if (depth >= 3) card.classList.add('is-behind-3');\n        } else {\n          card.classList.remove('is-visible');\n        }\n      });\n    }\n\n    \/\/ RAF throttle para suavidad\n    let ticking = false;\n    function onScroll() {\n      if (!ticking) {\n        requestAnimationFrame(() => { updateStack(); ticking = false; });\n        ticking = true;\n      }\n    }\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onScroll);\n    \/\/ Estado inicial: la primera card visible al menos\n    updateStack();\n    \/\/ Aseguramos que la primera siempre est\u00e1 visible (estado base)\n    cards[0].classList.add('is-visible');\n  })();\n\n  const vlDragEnd = (e) => {\n    if (!vlDrag) return;\n    if (e && e.pointerId !== vlDrag.pointerId) return;\n\n    const section = vlDrag.section;\n    const editor = vlDrag.editor;\n\n    section.classList.remove('vl-mk-editor-section--dragging');\n    editor.classList.remove('vl-mk-editor--is-dragging');\n\n    \/\/ Snap suave a su posici\u00f3n natural\n    section.style.transition = 'transform 0.22s cubic-bezier(0.34, 1.5, 0.64, 1)';\n    section.style.transform = '';\n    setTimeout(() => {\n      section.style.transition = '';\n    }, 240);\n\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    vlDrag = null;\n  };\n  document.addEventListener('pointerup', vlDragEnd);\n  document.addEventListener('pointercancel', vlDragEnd);\n\n  \/\/ Smooth scroll para anclas internas\n  document.querySelectorAll('.vl-landing a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function(e) {\n      e.preventDefault();\n      const target = document.querySelector(this.getAttribute('href'));\n      if (target) {\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  });\n})();\n\n\/* Puntos de fondo que se iluminan alrededor del cursor (hero, pain, perfiles) \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\n\n\/* SCROLL CONGELADO DE LOS 3 PASOS (sticky-steps) *\/\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\n\/* Tira de perfiles (.vl-segflow): foco por clases (no :hover) + tarjeta de mensaje\n   centrada bajo la ficha enfocada. Misma mecanica que la tira de proceso. *\/\n(function () {\n  'use strict';\n  var cap = document.getElementById('vl-seg-cap');\n  var flow = document.querySelector('.vl-segflow');\n  if (!cap || !flow) return;\n  var segs = [].slice.call(flow.querySelectorAll('.vl-seg'));\n  function isStacked() { return window.innerWidth <= 1024; }\n  function focus(el) {\n    segs.forEach(function (s) { s.classList.toggle('vl-on', s === el); });\n    flow.classList.add('vl-has-focus');\n    var d = el.querySelector('.vl-seg-desc');\n    cap.textContent = d ? d.textContent.trim() : '';\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 = el.offsetLeft + el.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    segs.forEach(function (s) { s.classList.remove('vl-on'); });\n    flow.classList.remove('vl-has-focus');\n    cap.classList.remove('is-on');\n  }\n  segs.forEach(function (el) {\n    el.addEventListener('pointerenter', function () { focus(el); });\n  });\n  flow.addEventListener('pointerleave', clear);\n})();\n\n\n\/* CTA FINAL \u2014 la tarjeta oscura \"se asienta\" con el scroll *\/\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\n\/* PAIN CARDS \u2014 spotlight que sigue al cursor + tilt 3D + contadores *\/\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\n\/* ORBE animado del Hero (sustituye al engranaje) *\/\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\n\/* COMPARATIVA \"Un cambio que notaras\" \u2014 revelado dirigido por scroll *\/\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\n\/* PASO 2 \u2014 nombre del candidato dinamico (el elegido en el Paso 1; por defecto Maria Garcia) *\/\n(function () {\n  'use strict';\n  function pintar(nombreCompleto, foto) {\n    var primero = nombreCompleto.split('\u00b7')[0].trim().split(' ')[0];\n    var full = document.querySelector('.vl-cand-full');\n    var img  = document.querySelector('.vl-cand-img');\n    if (full) full.textContent = nombreCompleto;\n    if (img && foto) {\n      \/\/ LiteSpeed hace lazy-load: hay que limpiar sus atributos o pisa la src que ponemos\n      img.removeAttribute('data-lazyloaded');\n      img.removeAttribute('data-src');\n      img.removeAttribute('loading');\n      img.src = foto;\n      img.alt = primero;\n    }\n    [].slice.call(document.querySelectorAll('.vl-cand-first')).forEach(function (el) {\n      el.textContent = primero;\n    });\n  }\n  document.addEventListener('click', function (e) {\n    var file = e.target.closest ? e.target.closest('.vl-mk-fp-file') : null;\n    if (!file) return;\n    var nameEl = file.querySelector('.vl-mk-fp-name');\n    var imgEl  = file.querySelector('img');\n    \/\/ LiteSpeed guarda la URL real en data-src (en src deja un placeholder base64)\n    var foto = imgEl ? (imgEl.getAttribute('data-src') || imgEl.src) : null;\n    if (nameEl) pintar(nameEl.textContent.trim(), foto);\n  });\n})();\n\n\/* PASO 3 \u2014 oportunidad destacada arriba + \"Ver mas oportunidades\".\n   El listado se mantiene SIEMPRE ordenado por puntuacion (de mayor a menor). *\/\n(function () {\n  'use strict';\n  var step3 = document.querySelector('[data-sstep=\"2\"]');\n  var editor = step3 && step3.querySelector('.vl-mk-editor');\n  var body = editor && editor.querySelector('.vl-mk-editor-body');\n  if (!body) return;\n  var secs = [].slice.call(body.querySelectorAll('[data-vl-section]'));\n  if (secs.length < 2) return;\n\n  \/\/ Puntuacion de match de cada oferta (el numero dentro del anillo)\n  function score(sec) {\n    var n = sec.querySelector('.vl-mk-ring-num');\n    return n ? parseFloat(String(n.textContent).replace(',', '.')) || 0 : 0;\n  }\n  \/\/ Orden canonico: de mas encaje a menos. Nunca se altera.\n  var ordenadas = secs.slice().sort(function (a, b) { return score(b) - score(a); });\n\n  var more = document.createElement('div');\n  more.className = 'vl-mk-more';\n  more.innerHTML = '<span>Ver m\u00e1s oportunidades<\/span>';\n\n  function pintar(orden) {\n    orden.forEach(function (sec) { body.appendChild(sec); });\n    body.appendChild(more);           \/\/ la fila \"Ver mas\", siempre al final\n  }\n\n  \/\/ Deja SOLO la elegida (desplegada arriba) y esconde el resto\n  function destacar(sec) {\n    var resto = ordenadas.filter(function (x) { return x !== sec; });\n    pintar([sec].concat(resto));      \/\/ la destacada primero; el resto, en orden de puntuacion\n    resto.forEach(function (x) {\n      x.classList.remove('vl-mk-editor-section--open');\n      x.classList.add('vl-oculta');\n    });\n    sec.classList.remove('vl-oculta');\n    more.classList.remove('vl-oculta');\n  }\n\n  \/\/ Estado inicial: Salesforce (la de MAYOR match) destacada y DESPLEGADA por defecto.\n  \/\/ ordenadas[0] es la de mayor puntuacion; destacar() la sube y oculta el resto,\n  \/\/ y vlEditorOpenSection() (expuesta por el IIFE del editor) inyecta y abre su detalle.\n  destacar(ordenadas[0]);\n  if (window.vlEditorOpenSection) window.vlEditorOpenSection(ordenadas[0]);\n\n  \/\/ \"Ver mas\": todas visibles, TODAS contraidas y en orden de puntuacion\n  function verTodas() {\n    pintar(ordenadas);\n    ordenadas.forEach(function (x) {\n      x.classList.remove('vl-oculta');\n      x.classList.remove('vl-mk-editor-section--open');\n    });\n    more.classList.add('vl-oculta');\n  }\n  more.addEventListener('click', verTodas);\n\n  body.addEventListener('click', function (e) {\n    if (!e.target.closest) return;\n    if (e.target.closest('.vl-mk-editor-drag')) return;   \/\/ el asa de arrastre tiene su propia logica\n\n    var head = e.target.closest('.vl-mk-editor-section-head');\n    if (!head) return;\n    var sec = head.closest('[data-vl-section]');\n    if (!sec) return;\n\n    \/\/ Si la oferta YA esta desplegada, pulsar su cabecera (flecha incluida) hace lo mismo que\n    \/\/ \"Ver mas oportunidades\": la repliega y muestra el listado completo.\n    \/\/ Se usa toda la cabecera y no solo la flecha porque el caret es un span diminuto y\n    \/\/ clicar un pixel al lado fallaba.\n    if (sec.classList.contains('vl-mk-editor-section--open')) {\n      e.stopPropagation();\n      e.preventDefault();\n      verTodas();\n      return;\n    }\n\n    \/\/ Si esta cerrada -> pasa a ser la destacada y el resto se esconde\n    destacar(sec);\n  }, true);\n})();\n\n\/* PASO 3 \u2014 boton \"Generar borrador de mensaje\": redacta usando el contexto de la empresa *\/\n(function () {\n  'use strict';\n  document.addEventListener('click', function (e) {\n    var btn = e.target.closest ? e.target.closest('[data-vl-draft]') : null;\n    if (!btn || btn.disabled) return;\n    var detail = btn.closest('.vl-mk-offer-detail');\n    var section = btn.closest('[data-vl-section]');\n    var box = detail && detail.querySelector('.vl-mk-od-draftbox');\n    if (!box || !section) return;\n    var T = window.VLI18N || {};\n    var texto = section.getAttribute('data-draft') || '';\n    btn.disabled = true;\n    \/\/ Modo borrador: se ocultan la oferta, el contexto de la empresa y el propio boton,\n    \/\/ para no alargar el panel. Solo queda el responsable + el mensaje generado.\n    detail.classList.add('vl-draft-on');\n    box.hidden = false;\n    box.innerHTML = '<p><span class=\"vl-mk-shimmer\">' + (T.drafting || 'Redactando\u2026') + '<\/span><\/p>';\n    setTimeout(function () {\n      box.innerHTML = '<h6>' + (T.draftTit || 'Borrador') + '<\/h6><p>' + texto + '<\/p>';\n      btn.disabled = false;\n    }, 1100);\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JS de los mockups \"Control de equipo\" (.vl-tm-*)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n\n  \/\/ 1) Reveal: a\u00f1ade .is-visible al entrar en viewport (dispara animaciones internas)\n  var mocks = document.querySelectorAll('.vl-tm[data-tm-mock]');\n  if (!mocks.length) return;\n\n  var obs = new IntersectionObserver(function (entries) {\n    entries.forEach(function (entry) {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        initMock(entry.target);\n        obs.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.4, rootMargin: '0px 0px -10% 0px' });\n\n  mocks.forEach(function (m) { obs.observe(m); });\n\n  \/\/ 2) Inicializa la interactividad propia de cada mockup\n  function initMock(root) {\n    \/\/ \u2500\u2500 Toggle de series en la gr\u00e1fica (Paso 1) \u2500\u2500\n    var chips = root.querySelectorAll('[data-tm-series]');\n    var graph = root.querySelector('[data-tm-graph]');\n    chips.forEach(function (chip) {\n      chip.addEventListener('click', function () {\n        var series = chip.getAttribute('data-tm-series');\n        chip.classList.toggle('is-off');\n        if (graph) graph.classList.toggle('hide-' + series, chip.classList.contains('is-off'));\n      });\n    });\n\n    \/\/ \u2500\u2500 Exportar m\u00e9tricas \u2192 toast \"Excel descargado\" (Hero) \u2500\u2500\n    var exportBtn = root.querySelector('[data-tm-export]');\n    var toast = root.querySelector('[data-tm-toast]');\n    if (exportBtn && toast) {\n      exportBtn.addEventListener('click', function () {\n        toast.classList.remove('is-hiding');\n        toast.classList.add('is-showing');\n        clearTimeout(toast._t);\n        toast._t = setTimeout(function () {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2400);\n      });\n    }\n\n    \/\/ \u2500\u2500 Play inline en filas de reuni\u00f3n (Paso 2): la fila \"suena\" al pulsar \u2500\u2500\n    var rowPlays = root.querySelectorAll('[data-tm-rowplay]');\n    rowPlays.forEach(function (p) {\n      p.addEventListener('click', function (e) {\n        e.stopPropagation();\n        var row = p.closest('.vl-tm-meeting');\n        if (!row) return;\n        var wasPlaying = row.classList.contains('is-playing');\n        \/\/ parar cualquier otra fila que estuviera sonando\n        root.querySelectorAll('.vl-tm-meeting.is-playing').forEach(function (r) { r.classList.remove('is-playing'); });\n        if (!wasPlaying) {\n          row.classList.add('is-playing');\n          \/\/ reiniciar la animaci\u00f3n de la barra de progreso desde 0\n          var prog = row.querySelector('.vl-tm-progress');\n          if (prog) { prog.style.animation = 'none'; void prog.offsetWidth; prog.style.animation = ''; }\n        }\n      });\n    });\n\n    \/\/ \u2500\u2500 Play de audio minimalista (Paso 3): label \u2192 l\u00ednea de tiempo con puntito \u2500\u2500\n    var playBtn = root.querySelector('[data-tm-play]');\n    if (playBtn) {\n      playBtn.addEventListener('click', function () {\n        var on = playBtn.classList.toggle('is-playing');\n        if (on) {\n          ['.vl-tm-mini-fill', '.vl-tm-mini-dot'].forEach(function (sel) {\n            var el = playBtn.querySelector(sel);\n            if (el) { el.style.animation = 'none'; void el.offsetWidth; el.style.animation = ''; }\n          });\n        }\n      });\n    }\n\n    \/\/ \u2500\u2500 Chat que se \"escribe solo\" + respuesta IA (Paso 3) \u2500\u2500\n    var chat = root.querySelector('[data-tm-chat]');\n    var answer = root.querySelector('[data-tm-answer]');\n    if (chat) {\n      \/\/ Leemos el texto del propio DOM (TranslatePress lo traduce; no hardcodeamos idioma en el JS)\n      var full = (chat.textContent || '').trim() || '\u00bfQu\u00e9 valoraci\u00f3n le dio David a la candidata?';\n      \/\/ Esperamos a que terminen las animaciones de entrada del informe\n      setTimeout(function () { typeChat(chat, full, 0, answer); }, 2600);\n    }\n  }\n\n  function typeChat(el, text, i, answer) {\n    el.style.color = '#161616';\n    if (i <= text.length) {\n      el.innerHTML = text.slice(0, i) + '<span class=\"vl-tm-caret\">&nbsp;<\/span>';\n      setTimeout(function () { typeChat(el, text, i + 1, answer); }, 42);\n    } else {\n      el.textContent = text;\n      \/\/ Mostrar la respuesta IA tras una breve pausa\n      if (answer) setTimeout(function () { answer.classList.add('is-open'); }, 650);\n    }\n  }\n})();\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Dirige tu equipo de selecci\u00f3n con datos, no con corazonadas. Toda la actividad de tus recruiters, en un solo panel. Mide cu\u00e1ntas entrevistas hace cada recruiter, escucha sus llamadas, revisa sus informes y asegura la calidad de todo tu equipo \u2014 sin asistir a cada proceso. Empieza gratis Solicitar demo 4.8 de 5 \u2605\u2605\u2605\u2605\u2605 +350 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9231,"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":"Gesti\u00f3n de equipos de selecci\u00f3n con IA | Voicit","rank_math_description":"Dirige tu equipo de recruiters con datos: m\u00e9tricas por consultor, audios e informes de cada entrevista y control de calidad a escala. Para consultoras de selecci\u00f3n y RRHH.","rank_math_focus_keyword":"gesti\u00f3n de equipos de selecci\u00f3n"},"class_list":["post-9214","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/comments?post=9214"}],"version-history":[{"count":3,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9214\/revisions"}],"predecessor-version":[{"id":9223,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9214\/revisions\/9223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/media\/9231"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/media?parent=9214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}