{"id":8391,"date":"2026-05-28T23:36:39","date_gmt":"2026-05-28T23:36:39","guid":{"rendered":"https:\/\/voicit.com\/?page_id=8391"},"modified":"2026-07-15T14:41:37","modified_gmt":"2026-07-15T14:41:37","slug":"recherche-demploi","status":"publish","type":"page","link":"https:\/\/voicit.com\/fr\/buscador-oportunidades-laborales\/","title":{"rendered":"Recherche d'offres d'emploi"},"content":{"rendered":"\n<!--\n  VOICIT \u2014 Landing: Buscador de Oportunidades Laborales\n  URL: \/buscador-oportunidades-laborales\/\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-8391, body.page-id-8391 #page, body.page-id-8391 #content, body.page-id-8391 .site-content, body.page-id-8391 .ast-container, body.page-id-8391 #primary, body.page-id-8391 #main, body.page-id-8391 .site-main, body.page-id-8391 article, body.page-id-8391 .entry-content, body.page-id-8391 .site-header, body.page-id-8391 #masthead, body.page-id-8391 .ast-primary-header-bar, body.page-id-8391 .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-8391 div#page.hfeed.site,\n  body.page-id-8391 div#content.site-content,\n  body.page-id-8391 div#content,\n  body.page-id-8391 .ast-container,\n  body.page-id-8391 div#primary.content-area,\n  body.page-id-8391 main#main.site-main,\n  body.page-id-8391 article#post-8391,\n  body.page-id-8391 article.page,\n  body.page-id-8391 .entry-content,\n  body.page-id-8391 .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-8391 {\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-8391 .wp-block-html,\n  body.page-id-8391 .wp-site-blocks,\n  body.page-id-8391 .is-layout-flow,\n  body.page-id-8391 .is-layout-constrained,\n  body.page-id-8391 .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-8391 .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-8391 .entry-header,\n  body.page-id-8391 .ast-page-title-wrapper,\n  body.page-id-8391 .ast-archive-description,\n  body.page-id-8391 .entry-title,\n  body.page-id-8391 h1.entry-title,\n  body.page-id-8391 .page-title {\n    display: none !important;\n  }\n  body.page-id-8391 .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\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: 280vh; }    \/* 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<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            Oportunidades laborales para todos tus candidatos.<br>\n            <span style=\"color:#6E6E6E;\">Cada perfil sin colocar es una oportunidad comercial perdida.<\/span>\n          <\/h1>\n\n          <p style=\"font-size:20px;color:#424242;max-width:620px;\" class=\"vl-mb-32\">\n            Selecciona a un candidato y la IA encontrar\u00e1 ofertas laborales activas en empresas que est\u00e1n contratando ese perfil, con Match Score y se\u00f1ales reales de mercado.\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              Buscar oportunidades\n            <\/a>\n            <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" class=\"vl-btn vl-btn--secondary\" rel=\"nofollow noopener\" target=\"_blank\">\n              Solicitar demo\n            <\/a>\n          <\/div>\n\n          <div style=\"display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap;\">\n            <a href=\"https:\/\/chromewebstore.google.com\/detail\/voicit-resumen-reuni%C3%B3n-ia\/lekjojhflheocafafpmiiemdiechdnkm\" target=\"_blank\" rel=\"noopener nofollow\" class=\"vl-google-badge\" style=\"text-decoration:none !important;color:#2A2A2A !important;\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"#4285F4\"\/><path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\"\/><path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"#FBBC05\"\/><path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\"\/><\/svg>\n              4.8 de 5 <span class=\"vl-stars\">\u2605\u2605\u2605\u2605\u2605<\/span> +350 rese\u00f1as\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Columna derecha: mockup del flujo PDF \u2192 IA \u2192 Plantilla -->\n        <div style=\"flex:1;min-width:0;\">\n          <div class=\"vl-hero-mockup\">\n\n            <!-- FASE 1: Dropzone con borde discontinuo. El PDF entra desde fuera. -->\n            <div class=\"vl-mk-dropzone\">\n              <!-- Mensaje inicial (visible hasta que llega el PDF) -->\n              <div class=\"vl-mk-dropzone-hint\">\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M12 3v13m0-13l-5 5m5-5l5 5M4 21h16\" stroke=\"#9A9A9A\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n                <span>Selecciona un candidato<\/span>\n              <\/div>\n              <!-- PDF + cursor (entra desde fuera y aterriza dentro del dropzone) -->\n              <div class=\"vl-mk-pdf-wrapper\">\n                <div class=\"vl-mk-pdf\">\n                  <div class=\"vl-mk-pdf-icon\" style=\"background:transparent;padding:0;position:relative;\">\n                    <img src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/maria-garcia-candidata-v2.webp\" alt=\"Mar\u00eda Garc\u00eda\" style=\"width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;\" loading=\"lazy\" decoding=\"async\"\/>\n                    <span style=\"position:absolute;bottom:-3px;right:-4px;background:#E84D47;color:#FFFFFF;font-size:7px;font-weight:800;letter-spacing:0.4px;padding:1px 4px;border-radius:3px;border:1.5px solid #FFFFFF;line-height:1;\">PDF<\/span>\n                  <\/div>\n                  <div class=\"vl-mk-pdf-meta\">\n                    <div class=\"vl-mk-pdf-name\">Mar\u00eda Garc\u00eda \u00b7 Sales Manager<\/div>\n                    <div class=\"vl-mk-pdf-size\">8 a\u00f1os \u00b7 Madrid<\/div>\n                  <\/div>\n                <\/div>\n                <svg class=\"vl-mk-cursor\" width=\"22\" height=\"26\" viewBox=\"0 0 22 26\" fill=\"none\">\n                  <path d=\"M2 2L20 14L11.5 15L8 23L2 2Z\" fill=\"#161616\" stroke=\"#FFFFFF\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/div>\n            <\/div>\n\n            <!-- Conector entre PDF y m\u00e1quina -->\n            <div class=\"vl-mk-arrow vl-mk-arrow--1\">\n              <svg width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\">\n                <path d=\"M8 0v26m-5-6l5 6 5-6\" stroke=\"#9A9A9A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n              <\/svg>\n            <\/div>\n\n            <!-- \"M\u00e1quina\" Voicit procesando -->\n            <div class=\"vl-mk-machine\">\n              <div class=\"vl-mk-machine-pulse\"><\/div>\n              <div class=\"vl-mk-machine-content\">\n                <div class=\"vl-mk-machine-logo\">\n                  <span class=\"vl-orb\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\n                  <span>Buscador de oportunidades<\/span>\n                <\/div>\n                <div class=\"vl-mk-machine-status\">\n                  <span class=\"vl-mk-dot\"><\/span>\n                  <span class=\"vl-mk-shimmer\">Analizando perfil del candidato\u2026<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Conector entre m\u00e1quina y plantilla -->\n            <div class=\"vl-mk-arrow vl-mk-arrow--2\">\n              <svg width=\"16\" height=\"32\" viewBox=\"0 0 16 32\" fill=\"none\">\n                <path d=\"M8 0v26m-5-6l5 6 5-6\" stroke=\"#9A9A9A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n              <\/svg>\n            <\/div>\n\n            <!-- FASE 2: Plantilla generada -->\n            <div class=\"vl-mk-template\">\n              <div class=\"vl-mk-template-head\">\n                <div class=\"vl-mk-template-title\">Ofertas con match para Mar\u00eda<\/div>\n                <span class=\"vl-mk-badge-ok\">\u2713 Generada<\/span>\n              <\/div>\n              <ul class=\"vl-mk-section-list\">\n                <li><span class=\"vl-mk-ring vl-mk-ring--high\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:9.1\"\/><\/svg><span class=\"vl-mk-ring-num\">9.1<\/span><\/span><span class=\"vl-mk-section-text\">Salesforce<\/span><span class=\"vl-mk-role\">Senior AE<\/span><\/li>\n                <li><span class=\"vl-mk-ring vl-mk-ring--high\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:8.4\"\/><\/svg><span class=\"vl-mk-ring-num\">8.4<\/span><\/span><span class=\"vl-mk-section-text\">HubSpot<\/span><span class=\"vl-mk-role\">Sales Mgr EMEA<\/span><\/li>\n                <li><span class=\"vl-mk-ring vl-mk-ring--med\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:7.2\"\/><\/svg><span class=\"vl-mk-ring-num\">7.2<\/span><\/span><span class=\"vl-mk-section-text\">Pipedrive<\/span><span class=\"vl-mk-role\">Account Executive<\/span><\/li>\n                <li><span class=\"vl-mk-ring vl-mk-ring--med\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:6.5\"\/><\/svg><span class=\"vl-mk-ring-num\">6.5<\/span><\/span><span class=\"vl-mk-section-text\">Holded<\/span><span class=\"vl-mk-role\">Head of Sales<\/span><\/li>\n                <li><span class=\"vl-mk-ring vl-mk-ring--low\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:5.3\"\/><\/svg><span class=\"vl-mk-ring-num\">5.3<\/span><\/span><span class=\"vl-mk-section-text\">Factorial<\/span><span class=\"vl-mk-role\">Sales Lead<\/span><\/li>\n              <\/ul>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       LOGOS DE CONFIANZA\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section style=\"padding:32px 0;border-top:1px solid #F2F2F2;border-bottom:1px solid #F2F2F2;overflow:hidden;\">\n    <div class=\"vl-container vl-text-center\">\n      <p class=\"text-small text-secondary vl-mb-16\" style=\"font-size:14px;color:#9A9A9A;\">Elegida por +1.000 empresas para documentar sus entrevistas<\/p>\n      <div style=\"overflow:hidden;\">\n        <div class=\"vl-logos-track\">\n          <!-- 6 logos de clientes reales (cabecera de voicit.com) -->\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\n          <!-- Duplicados para loop continuo -->\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       PROBLEMA \/ PAIN POINTS\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section 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\">Colocar a un buen candidato en su puesto ideal<br class=\"vl-br-desktop\">no deber\u00eda depender de la suerte<\/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\">Prospecci\u00f3n manual durante horas<\/h3>\n          <p class=\"text-small\">Buscar oportunidades que encajen con cada candidato no es escalable.<\/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\">Candidatos valiosos que se pierden<\/h3>\n          <p class=\"text-small\">Perfiles ideales para otros puestos, olvidados en tu base de datos.<\/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\">Sin visibilidad del mercado<\/h3>\n          <p class=\"text-small\">No sabes qu\u00e9 empresas est\u00e1n buscando a un perfil que ya tienes documentado.<\/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;\">De candidato sin colocar a oportunidad comercial<\/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;\">De candidato sin colocar a oportunidad comercial<\/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>Selecciona un candidato<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Elige cualquier candidato de tu base que no est\u00e9 colocado. Pulsa \u00abBuscar oportunidades\u00bb y la IA empieza a trabajar.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Funciona con cualquier perfil ya en tu sistema: candidatos en activo, descartados de procesos anteriores, espont\u00e1neos\u2026<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 1: Selector de candidatos -->\n          <div class=\"vl-mk-filepicker vl-reveal\">\n            <div class=\"vl-mk-fp-header\">\n              <span class=\"vl-mk-fp-dots\"><span><\/span><span><\/span><span><\/span><\/span>\n              <span class=\"vl-mk-fp-title\">Selecciona un candidato<\/span>\n            <\/div>\n            <div class=\"vl-mk-fp-grid\">\n              <div class=\"vl-mk-fp-file\" data-idx=\"1\">\n                <img src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/javier-ruiz-candidato.webp\" alt=\"Javier Ruiz\" style=\"width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;\" loading=\"lazy\" decoding=\"async\"\/>\n                <span class=\"vl-mk-fp-name\">Javier Ruiz \u00b7 Product Manager<\/span>\n              <\/div>\n              <div class=\"vl-mk-fp-file\" data-idx=\"2\">\n                <img src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/laura-pena-candidata.webp\" alt=\"Laura Pe\u00f1a\" style=\"width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;\" loading=\"lazy\" decoding=\"async\"\/>\n                <span class=\"vl-mk-fp-name\">Laura Pe\u00f1a \u00b7 UX Designer<\/span>\n              <\/div>\n              <div class=\"vl-mk-fp-file\" data-idx=\"3\">\n                <img src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/maria-garcia-candidata-v2.webp\" alt=\"Mar\u00eda Garc\u00eda\" style=\"width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;\" loading=\"lazy\" decoding=\"async\"\/>\n                <span class=\"vl-mk-fp-name\">Mar\u00eda Garc\u00eda \u00b7 Sales Manager<\/span>\n              <\/div>\n              <div class=\"vl-mk-fp-file\" data-idx=\"4\">\n                <img src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/carlos-torres-candidato.webp\" alt=\"Carlos Torres\" style=\"width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;\" loading=\"lazy\" decoding=\"async\"\/>\n                <span class=\"vl-mk-fp-name\">Carlos Torres \u00b7 Data Engineer<\/span>\n              <\/div>\n            <\/div>\n            <div class=\"vl-mk-fp-actions\">\n              <button class=\"vl-mk-fp-btn\" type=\"button\" data-vl-upload>Buscar oportunidades<\/button>\n            <\/div>\n            <!-- Toast estilo Paso 3, aparece desde arriba al pulsar -->\n            <div class=\"vl-mk-fp-toast\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n              <span>B\u00fasqueda iniciada<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Paso 2 -->\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"1\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">2<\/div>\n            <h3>La IA crea un plan de b\u00fasqueda inteligente<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Voicit sintetiza el perfil profesional, identifica sectores y roles ideales, y genera las preguntas de cribado que har\u00e1n match con las necesidades del mercado.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Antes de buscar empresas, te muestra el plan generado para que puedas ajustar sectores, roles o filtros si quieres afinar el rango de b\u00fasqueda.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 2: Chat con el agente -->\n          <div class=\"vl-mk-chat vl-reveal\">\n\n            <!-- Mensaje del usuario con el candidato -->\n            <div class=\"vl-mk-chat-row vl-mk-chat-row--user\">\n              <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--user\">\n                <div class=\"vl-mk-chat-pdf-tag\">\n                  <img class=\"vl-cand-img\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/maria-garcia-candidata-v2.webp\" alt=\"Mar\u00eda Garc\u00eda\" style=\"width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;\" loading=\"lazy\" decoding=\"async\"\/>\n                  <span class=\"vl-cand-full\">Mar\u00eda Garc\u00eda \u00b7 Sales Manager<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Burbuja \"pensando\" del agente -->\n            <div class=\"vl-mk-chat-row vl-mk-chat-row--ai vl-mk-chat-thinking\">\n              <div class=\"vl-mk-chat-avatar\">\n                <span class=\"vl-orb vl-orb--avatar\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\n              <\/div>\n              <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--ai\">\n                <span class=\"vl-mk-shimmer\">Analizando perfil del candidato\u2026<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- Respuesta del agente con el plan de b\u00fasqueda -->\n            <div class=\"vl-mk-chat-row vl-mk-chat-row--ai vl-mk-chat-response\">\n              <div class=\"vl-mk-chat-avatar\">\n                <span class=\"vl-orb vl-orb--avatar\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\n              <\/div>\n              <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--ai\">\n                <p class=\"vl-mk-chat-intro\">Busco ofertas activas para <span class=\"vl-cand-first\">Mar\u00eda<\/span>:<\/p>\n                <ul class=\"vl-mk-chat-sections\">\n                  <li><span class=\"vl-mk-chat-section-name\">Puestos: Account Executive, Sales Manager<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Sectores: SaaS B2B, Fintech, MarTech<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Estado: vacantes de los \u00faltimos 30 d\u00edas<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar\">\u2715<\/button><\/li>\n                  <li><span class=\"vl-mk-chat-section-name\">Match: experiencia, sector y ubicaci\u00f3n<\/span><button type=\"button\" class=\"vl-mk-chat-li-delete\" data-vl-delete-section aria-label=\"Eliminar\">\u2715<\/button><\/li>\n                <\/ul>\n                <p class=\"vl-mk-chat-question\">\u00bfLanzo la b\u00fasqueda con este plan?<\/p>\n                <div class=\"vl-mk-chat-buttons\">\n                  <button class=\"vl-mk-chat-btn vl-mk-chat-btn--primary\" type=\"button\" data-vl-chat-confirm>S\u00ed, buscar ofertas<\/button>\n                  <button class=\"vl-mk-chat-btn\" type=\"button\" data-vl-chat-adjust>Ajustar<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Paso 3 -->\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"2\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">3<\/div>\n            <h3>Recibe un ranking de ofertas con match score<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Obtienes un ranking de ofertas laborales activas ordenado por match real entre el candidato y cada puesto, con el detalle de la vacante, la empresa y por qu\u00e9 encaja.<span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">No solo te dice qu\u00e9 empresa contrata: te dice qu\u00e9 oferta concreta est\u00e1 abierta, en qu\u00e9 condiciones y por qu\u00e9 tu candidato encaja con ese puesto espec\u00edfico.<\/span><\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <!-- MOCKUP PASO 3: Editor de plantilla INTERACTIVO -->\n          <div class=\"vl-mk-editor vl-reveal\">\n\n            <!-- Cabecera del editor -->\n            <div class=\"vl-mk-editor-head vl-mk-editor-head--action\">\n              <span class=\"vl-mk-editor-title\">Ofertas con match para <span class=\"vl-cand-first\">Mar\u00eda<\/span><\/span>\n              <button type=\"button\" class=\"vl-mk-editor-action vl-mk-editor-action--primary\" data-vl-save>Exportar datos<\/button>\n            <\/div>\n\n            <!-- Cuerpo: secciones de la plantilla (acorde\u00f3n) -->\n            <div class=\"vl-mk-editor-body\">\n\n              <div class=\"vl-mk-editor-section\" data-vl-section\n                   data-tags=\"Oferta activa|green;;Funding reciente|green;;Contrataci\u00f3n activa|purple\"\n                   data-offer=\"Senior Account Executive \u00b7 Madrid|Hace 4 d\u00edas \u00b7 salesforce.com\"\n                   data-owner=\"Marta Rubio|Talent Acquisition|MR\"\n                   data-stats=\"1.200|empleados en Iberia;;7|departamentos;;41%|perfiles comerciales\"\n                   data-context=\"Serie B de 45M\u20ac y 3 AEs incorporados el \u00faltimo trimestre: est\u00e1n escalando el equipo comercial.\"\n                   data-draft=\"Hola Marta, he visto que hab\u00e9is abierto la vacante de Senior Account Executive en Madrid y que ven\u00eds de cerrar la Serie B. Justo estoy trabajando con un perfil de venta consultiva en SaaS B2B con ticket medio de 50-250K\u20ac que encaja con lo que busc\u00e1is. \u00bfTe viene bien que te lo presente esta semana?\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-ring vl-mk-ring--high\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:9.1\"\/><\/svg><span class=\"vl-mk-ring-num\">9.1<\/span><\/span>\n                  <span class=\"vl-mk-editor-name\">Salesforce<\/span>\n                  <span class=\"vl-mk-role\">Senior Account Executive<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section\n                   data-tags=\"Oferta activa|green;;Expansi\u00f3n geogr\u00e1fica|blue\"\n                   data-offer=\"Sales Manager EMEA \u00b7 Barcelona|Hace 8 d\u00edas \u00b7 hubspot.com\"\n                   data-owner=\"Nuria Ferrer|Talent Acquisition Lead|NF\"\n                   data-stats=\"240|empleados en Iberia;;6|departamentos;;38%|perfiles comerciales\"\n                   data-context=\"Expansi\u00f3n del equipo Iberia anunciada. Refuerzan el management comercial en mid-market SaaS.\"\n                   data-draft=\"Hola Nuria, enhorabuena por la expansi\u00f3n del equipo Iberia. He visto vuestra vacante de Sales Manager EMEA en Barcelona y tengo un perfil que ya ha liderado equipos de 4-6 AEs en mid-market SaaS. \u00bfTe encajar\u00eda que te pase su candidatura?\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-ring vl-mk-ring--high\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:8.4\"\/><\/svg><span class=\"vl-mk-ring-num\">8.4<\/span><\/span>\n                  <span class=\"vl-mk-editor-name\">HubSpot<\/span>\n                  <span class=\"vl-mk-role\">Sales Manager EMEA<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section\n                   data-tags=\"Oferta activa|green;;Funding reciente|green\"\n                   data-offer=\"Account Executive \u00b7 Remoto (Espa\u00f1a)|Hace 11 d\u00edas \u00b7 pipedrive.com\"\n                   data-owner=\"Iv\u00e1n Salas|Recruiter|IS\"\n                   data-stats=\"850|empleados;;5|departamentos;;35%|perfiles comerciales\"\n                   data-context=\"Ronda reciente y apertura de mercado en el sur de Europa. Contratan en remoto desde Espa\u00f1a.\"\n                   data-draft=\"Hola Iv\u00e1n, veo que est\u00e1is creciendo en el sur de Europa y que ten\u00e9is abierta una vacante de Account Executive en remoto. Trabajo con un perfil de AE con recorrido en SaaS B2B y ciclo completo. \u00bfTe lo presento?\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-ring vl-mk-ring--med\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:7.2\"\/><\/svg><span class=\"vl-mk-ring-num\">7.2<\/span><\/span>\n                  <span class=\"vl-mk-editor-name\">Pipedrive<\/span>\n                  <span class=\"vl-mk-role\">Account Executive<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section\n                   data-tags=\"Oferta activa|green;;Bootstrapped|blue\"\n                   data-offer=\"Head of Sales \u00b7 Barcelona|Hace 12 d\u00edas \u00b7 holded.com\"\n                   data-owner=\"Clara Ortiz|People Manager|CO\"\n                   data-stats=\"60|empleados;;4|departamentos;;30%|perfiles comerciales\"\n                   data-context=\"Bootstrapped, con crecimiento org\u00e1nico. Buscan su primer Head of Sales para montar el equipo desde cero.\"\n                   data-draft=\"Hola Clara, he visto que busc\u00e1is vuestro primer Head of Sales. Al ser una posici\u00f3n fundacional, tengo un perfil que ya ha montado un equipo comercial desde cero en una empresa de vuestro tama\u00f1o. \u00bfHablamos?\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-ring vl-mk-ring--med\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:6.5\"\/><\/svg><span class=\"vl-mk-ring-num\">6.5<\/span><\/span>\n                  <span class=\"vl-mk-editor-name\">Holded<\/span>\n                  <span class=\"vl-mk-role\">Head of Sales<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n              <div class=\"vl-mk-editor-section\" data-vl-section\n                   data-tags=\"Oferta antigua|amber;;Startup|blue\"\n                   data-offer=\"Sales Operations Lead \u00b7 Barcelona|Hace 34 d\u00edas \u00b7 factorial.es\"\n                   data-owner=\"Dani Vega|Talent Partner|DV\"\n                   data-stats=\"900|empleados;;8|departamentos;;33%|perfiles comerciales\"\n                   data-context=\"Lleva 34 d\u00edas publicada: confirma con el responsable si sigue abierta antes de presentar perfiles.\"\n                   data-draft=\"Hola Dani, vi vuestra vacante de Sales Operations Lead, aunque lleva ya unas semanas publicada. \u00bfSigue abierta? Si es as\u00ed, tengo un perfil de Revenue Ops que podr\u00eda encajar y te lo paso sin compromiso.\">\n                <div class=\"vl-mk-editor-section-head\" data-vl-toggle>\n                  <span class=\"vl-mk-editor-drag\">\u22ee\u22ee<\/span>\n                  <span class=\"vl-mk-ring vl-mk-ring--low\"><svg viewBox=\"0 0 28 28\"><circle class=\"vl-mk-ring-track\" cx=\"14\" cy=\"14\" r=\"12\"\/><circle class=\"vl-mk-ring-fill\" cx=\"14\" cy=\"14\" r=\"12\" style=\"--p:5.3\"\/><\/svg><span class=\"vl-mk-ring-num\">5.3<\/span><\/span>\n                  <span class=\"vl-mk-editor-name\">Factorial<\/span>\n                  <span class=\"vl-mk-role\">Sales + Ops Lead<\/span>\n                  <span class=\"vl-mk-editor-caret\">\u25be<\/span>\n                <\/div>\n                <div class=\"vl-mk-editor-section-body\"><\/div>\n              <\/div>\n\n            <\/div>\n\n            <!-- Pie con acci\u00f3n de guardar -->\n\n\n            <!-- Toast de confirmaci\u00f3n -->\n            <div class=\"vl-mk-editor-toast\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n              <span>Datos exportados<\/span>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n          <\/div><!-- \/vl-ssteps-stage -->\n        <\/div><!-- \/vl-container -->\n      <\/div><!-- \/vl-ssteps-sticky -->\n    <\/div><!-- \/vl-ssteps-track -->\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CASOS DE USO\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt vl-dots vl-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\">Oportunidades laborales para todo tipo de perfiles<\/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\"><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\">Headhunting<\/span>\n          <span class=\"vl-seg-desc\">Coloca perfiles ejecutivos buscando empresas con vacantes equivalentes.<\/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\">Executive Search<\/span>\n          <span class=\"vl-seg-desc\">Encuentra empresas a las que ofrecer perfiles que ya tienes en tu base.<\/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=\"M16 4 L30 11 L16 18 L2 11 Z\" fill=\"#1A171B\"\/><path d=\"M25 12.5 L25 20.5\" stroke=\"#1A171B\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"\/><circle cx=\"25\" cy=\"22\" r=\"1.5\" fill=\"#1A171B\"\/><path d=\"M7 14 L7 19 C7 22.5 11 25.5 16 25.5 C21 25.5 25 22.5 25 19\" stroke=\"#1A171B\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Recruiting<\/span>\n          <span class=\"vl-seg-desc\">Coloca perfiles junior-mid en empresas con vacantes abiertas para su nivel.<\/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=\"M4 18v-2C4 9.5 9.5 4 16 4s12 5.5 12 12v2\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\"\/><rect x=\"2\" y=\"16\" width=\"6.5\" height=\"11\" rx=\"2\" fill=\"#1A171B\"\/><rect x=\"23.5\" y=\"16\" width=\"6.5\" height=\"11\" rx=\"2\" fill=\"#1A171B\"\/><path d=\"M26.5 27v2.5h-6\" stroke=\"#1A171B\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\"\/><circle cx=\"19\" cy=\"29.5\" r=\"1.5\" fill=\"#1A171B\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">ETTs y trabajo temporal<\/span>\n          <span class=\"vl-seg-desc\">Coloca a tus trabajadores en empresas con demanda activa de ese perfil.<\/span>\n        <\/div>\n        <p class=\"vl-seg-caption\" id=\"vl-seg-cap\"><\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIAL\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIOS (4 clientes reales RRHH)\n       Las fotos est\u00e1n como iniciales \u2014 sustituir por LinkedIn \/ Google\n       cuando el cliente d\u00e9 permiso. URLs LinkedIn al final de cada bloque.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt vl-tstack-section\" style=\"padding:0;\">\n    <div class=\"vl-tstack-track\">\n      <div class=\"vl-tstack-sticky\">\n            <div class=\"vl-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\">Consultoras de selecci\u00f3n que ya generan negocio con cada candidato<\/h2>\n          <\/div>\n\n          <div class=\"vl-tstack-cards\">\n\n            <!-- Testimonio 1: H\u00e9ctor Huertas \u2014 Buenpuerto -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"0\">\n              <p class=\"vl-testimonial-text\">\n                Llevo m\u00e1s de 25 a\u00f1os en selecci\u00f3n y siempre hab\u00eda sentido que perd\u00edamos potenciales clientes por no tener tiempo para prospectar. Ahora cada candidato se convierte en una nueva oportunidad comercial.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/hector-huertas.webp\" alt=\"H\u00e9ctor Huertas\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">H\u00e9ctor Huertas<\/div>\n                  <div class=\"vl-testimonial-role\">Socio Director \u00b7 Buenpuerto<br>+25 a\u00f1os en RRHH<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Testimonio 2: I\u00f1aki Goyeneche \u2014 ieTeam -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"1\">\n              <p class=\"vl-testimonial-text\">\n                Cada candidato que documentamos sigue aportando valor mucho despu\u00e9s del proceso para el que entr\u00f3. Voicit identifica en minutos las empresas con vacantes donde encaja cada perfil.\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                Antes se quedaban en el olvido en nuestra base de datos candidatos que llegaron a ser finalistas en otros procesos de selecci\u00f3n. Ahora la IA genera un ranking en segundos con se\u00f1ales que nosotros ten\u00edamos identificadas.\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 notar\u00e1s<\/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 el buscador de oportunidades<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Prospectar empresa por empresa manualmente<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Buscar se\u00f1ales de contrataci\u00f3n en LinkedIn<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\n              <span>Candidatos valiosos sin colocar en tu base<\/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 el buscador de oportunidades<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Un click y la IA genera el plan de b\u00fasqueda<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Ranking de ofertas con match score<\/span>\n            <\/li>\n            <li>\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\n              <span>Cada candidato = una pipeline comercial<\/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;\">Deja de perder candidatos. Empieza a generar oportunidades.<\/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              Buscar oportunidades\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>\u00bfDe d\u00f3nde saca la IA las empresas para el ranking?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>La IA cruza informaci\u00f3n de m\u00faltiples fuentes p\u00fablicas: rondas de inversi\u00f3n recientes, ofertas activas en portales de empleo, cambios organizacionales, presencia en redes profesionales, y otras se\u00f1ales que indican necesidad de ese perfil.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfFunciona con candidatos de cualquier sector?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. El buscador funciona para perfiles tech, comerciales, finanzas, sanitarios, industriales, ejecutivos&#8230; Cuanto m\u00e1s espec\u00edfico sea el perfil del candidato, m\u00e1s afinado es el ranking de empresas.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfPuedo ajustar el plan de b\u00fasqueda antes de ejecutarlo?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Por supuesto. Antes de buscar, la IA te muestra los sectores, roles y filtros que ha identificado. Puedes a\u00f1adir o quitar sectores, ajustar el tama\u00f1o de empresa, definir ubicaciones, o modificar las preguntas de cribado.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfC\u00f3mo de actualizadas est\u00e1n las se\u00f1ales del mercado?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Las se\u00f1ales se actualizan en tiempo real. Rondas de inversi\u00f3n publicadas hoy, ofertas activas de esta semana, cambios de C-level recientes&#8230; El ranking refleja el estado del mercado en el momento exacto en que ejecutas la b\u00fasqueda.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfCu\u00e1nto tarda en devolverme el ranking de empresas?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Desde que pulsas \u00abBuscar oportunidades\u00bb hasta tener el ranking completo con se\u00f1ales de cada empresa: 1-2 minutos. Comp\u00e1ralo con las 4-6 horas que llevar\u00eda hacer esa misma b\u00fasqueda a mano para un solo candidato.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfQu\u00e9 es un buscador de oportunidades laborales para consultoras de selecci\u00f3n?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Es una herramienta de reverse recruiting: en lugar de buscar candidatos para una vacante, encuentra empresas que est\u00e1n contratando el perfil de un candidato que ya tienes. Voicit analiza se\u00f1ales p\u00fablicas del mercado (ofertas activas, rondas de inversi\u00f3n, crecimiento de equipos) y devuelve un ranking de empresas con match para ese perfil. Est\u00e1 pensado para consultoras de selecci\u00f3n, headhunters y ETTs \u2014 no es un portal de empleo para candidatos.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfC\u00f3mo encontrar empresas que est\u00e1n contratando un perfil concreto?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Manualmente exige revisar portales de empleo, LinkedIn y noticias de financiaci\u00f3n una a una. Con el buscador de Voicit seleccionas al candidato, la IA cruza esas se\u00f1ales por ti y te devuelve las empresas con vacantes abiertas que encajan con su perfil, ordenadas por match score y con el contacto responsable de cada proceso.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfQu\u00e9 puedo hacer con los candidatos finalistas que no llegu\u00e9 a colocar?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Son tu mayor activo comercial: perfiles ya entrevistados y documentados. El buscador los convierte en la puerta de entrada a nuevas empresas cliente. Si adem\u00e1s generas sus <a href=\"https:\/\/voicit.com\/plantillas-informes-candidatos\/\">informes de candidato<\/a> con Voicit, tendr\u00e1s el dossier listo para presentarlos en cuanto aparezca la oportunidad.<\/p>\n          <\/div>\n        <\/details>\n\n        <details>\n          <summary>\u00bfCu\u00e1nto cuesta el buscador de oportunidades de Voicit?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Est\u00e1 incluido en los planes de Voicit, desde 7 \u20ac\/mes. Puedes empezar gratis, sin compromiso y sin tarjeta de cr\u00e9dito, y ver el detalle en la <a href=\"https:\/\/voicit.com\/pricing\/\">p\u00e1gina de precios<\/a>.<\/p>\n          <\/div>\n        <\/details>\n      <\/div>\n\n      <div style=\"text-align:center;margin-top:48px;\">\n        <a href=\"https:\/\/voicit.com\/voicit-faqs\/\" class=\"vl-btn\" style=\"background:#161616 !important;color:#FFFFFF !important;border:none;border-radius:100px;padding:14px 32px;font-weight:700;font-size:15px;text-decoration:none !important;display:inline-flex;align-items:center;\">\n          M\u00e1s dudas aqu\u00ed\n        <\/a>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCHEMA JSON-LD\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Buscador de oportunidades laborales \u2014 Voicit\",\n  \"url\": \"https:\/\/voicit.com\/buscador-oportunidades-laborales\/\",\n  \"description\": \"Selecciona un candidato y la IA encuentra empresas con ofertas laborales activas que encajan con su perfil, con match score y se\u00f1ales reales de mercado. Para consultoras de selecci\u00f3n, headhunting y ETTs.\",\n  \"applicationCategory\": \"BusinessApplication\",\n  \"operatingSystem\": \"Web\",\n  \"inLanguage\": \"es\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"7.00\",\n    \"priceCurrency\": \"EUR\",\n    \"url\": \"https:\/\/voicit.com\/pricing\/\"\n  },\n  \"aggregateRating\": {\n    \"@type\": \"AggregateRating\",\n    \"ratingValue\": \"4.8\",\n    \"ratingCount\": \"350\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Voicit\",\n    \"url\": \"https:\/\/voicit.com\/\"\n  }\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfDe d\u00f3nde saca la IA las empresas para el ranking?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"La IA cruza informaci\u00f3n p\u00fablica: rondas de inversi\u00f3n, ofertas activas, cambios organizacionales y otras se\u00f1ales que indican necesidad del perfil.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfFunciona con candidatos de cualquier sector?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"S\u00ed. Funciona para tech, comercial, finanzas, sanitario, industrial, ejecutivos. Cuanto m\u00e1s espec\u00edfico el perfil, m\u00e1s afinado el ranking.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfPuedo ajustar el plan de b\u00fasqueda antes de ejecutarlo?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Por supuesto. Antes de buscar, la IA te muestra sectores, roles y filtros identificados. Puedes ajustar todos los par\u00e1metros antes de ejecutar.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfC\u00f3mo de actualizadas est\u00e1n las se\u00f1ales del mercado?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Las se\u00f1ales se actualizan en tiempo real. Rondas de inversi\u00f3n, ofertas activas, cambios de C-level. El ranking refleja el mercado al ejecutar.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfCu\u00e1nto tarda en devolverme el ranking de empresas?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Entre 1 y 2 minutos para obtener el ranking completo con se\u00f1ales de cada empresa. Comp\u00e1ralo con 4-6 horas a mano por candidato.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfQu\u00e9 es un buscador de oportunidades laborales para consultoras de selecci\u00f3n?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Es una herramienta de reverse recruiting: encuentra empresas que est\u00e1n contratando el perfil de un candidato que ya tienes, analizando se\u00f1ales p\u00fablicas del mercado y devolviendo un ranking con match score. Para consultoras de selecci\u00f3n, headhunters y ETTs; no es un portal de empleo para candidatos.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfC\u00f3mo encontrar empresas que est\u00e1n contratando un perfil concreto?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Voicit cruza ofertas activas, rondas de inversi\u00f3n y crecimiento de equipos, y devuelve las empresas con vacantes abiertas que encajan con el perfil, ordenadas por match score y con el contacto responsable.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfQu\u00e9 puedo hacer con los candidatos finalistas que no llegu\u00e9 a colocar?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Convertirlos en oportunidades comerciales: el buscador encuentra empresas con vacantes donde encajan, y sus informes de candidato ya documentados sirven como dossier de presentaci\u00f3n.\"\n   }\n  },\n  {\n   \"@type\": \"Question\",\n   \"name\": \"\u00bfCu\u00e1nto cuesta el buscador de oportunidades de Voicit?\",\n   \"acceptedAnswer\": {\n    \"@type\": \"Answer\",\n    \"text\": \"Est\u00e1 incluido en los planes de Voicit, desde 7 \u20ac\/mes. Puedes empezar gratis, sin compromiso y sin tarjeta de cr\u00e9dito.\"\n   }\n  }\n ]\n}\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JavaScript \u2014 Scroll Animations\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function() {\n  'use strict';\n  \/\/ Textos del chat seg\u00fan idioma (TranslatePress cambia <html lang>). No depende de TranslatePress.\n  var VLI18N = (function(){\n    var d = {\n      es:{gen:'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","protected":false},"excerpt":{"rendered":"<p>S\u00e9lectionnez un candidat et l'IA trouvera les entreprises qui recherchent ce profil, avec un score de correspondance et des signaux de march\u00e9 r\u00e9els.<\/p>","protected":false},"author":1,"featured_media":9229,"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":"Buscador de oportunidades laborales con IA | Voicit","rank_math_description":"Selecciona un candidato y la IA encuentra ofertas laborales activas con match real. Ranking con se\u00f1ales del mercado en minutos. Para consultoras de selecci\u00f3n.","rank_math_focus_keyword":"buscador oportunidades laborales"},"class_list":["post-8391","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/pages\/8391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/comments?post=8391"}],"version-history":[{"count":70,"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/pages\/8391\/revisions"}],"predecessor-version":[{"id":9213,"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/pages\/8391\/revisions\/9213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/media\/9229"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/fr\/wp-json\/wp\/v2\/media?parent=8391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}