{"id":9467,"date":"2026-07-28T10:28:39","date_gmt":"2026-07-28T10:28:39","guid":{"rendered":"https:\/\/voicit.com\/integraciones\/viterbit\/"},"modified":"2026-07-29T14:39:31","modified_gmt":"2026-07-29T14:39:31","slug":"viterbit","status":"publish","type":"page","link":"https:\/\/voicit.com\/de\/integraciones\/viterbit\/","title":{"rendered":"Voicit + Viterbit Integration"},"content":{"rendered":"\r\n<!--\r\n  VOICIT \u2014 Landing: Integraci\u00f3n Voicit + Viterbit (consultoras de selecci\u00f3n)\r\n  URL: \/integraciones\/viterbit\/\r\n  Embebida como Custom HTML en Gutenberg. Basada en la landing can\u00f3nica de referencia\r\n  (plantillas-informes-candidatos): mismo design system, efectos y estructura.\r\n  CTA \u00fanico: \"Pide una demo\" \u2192 agenda de Calendly (sin registro self-service).\r\n-->\r\n\r\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 -->\r\n<style id=\"vl-wp-overrides\">\r\n  \/* \u2500\u2500 1) FULL-WIDTH: anular TODOS los wrappers de Astra incluidos los IDs espec\u00edficos \u2500\u2500\r\n        Jerarqu\u00eda real: body > #page > #content > .ast-container > #primary > main#main > article#post-9467 > .entry-content > .vl-landing *\/\r\n  body.page-id-9467 div#page.hfeed.site,\r\n  body.page-id-9467 div#content.site-content,\r\n  body.page-id-9467 div#content,\r\n  body.page-id-9467 .ast-container,\r\n  body.page-id-9467 div#primary.content-area,\r\n  body.page-id-9467 main#main.site-main,\r\n  body.page-id-9467 article#post-9467,\r\n  body.page-id-9467 article.page,\r\n  body.page-id-9467 .entry-content,\r\n  body.page-id-9467 .entry-content.clear {\r\n    max-width: 100% !important;\r\n    width: 100% !important;\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n  }\r\n\r\n  \/* \u2500\u2500 FONDO: toda el \u00e1rea superior (incluida la barra del header) usa el gris del hero \u2192 sin franja blanca \u2500\u2500 *\/\r\n  body.page-id-9467,\r\n  body.page-id-9467 div#page.hfeed.site,\r\n  body.page-id-9467 div#content.site-content,\r\n  body.page-id-9467 .ast-container,\r\n  body.page-id-9467 div#primary.content-area,\r\n  body.page-id-9467 main#main.site-main,\r\n  body.page-id-9467 article#post-9467,\r\n  body.page-id-9467 .entry-content,\r\n  body.page-id-9467 .site-header,\r\n  body.page-id-9467 #masthead,\r\n  body.page-id-9467 .ast-primary-header-bar,\r\n  body.page-id-9467 .main-header-bar {\r\n    background-color: #F8F8F8 !important;\r\n  }\r\n\r\n  \/* Variables WordPress de padding global *\/\r\n  body.page-id-9467 {\r\n    --wp--style--root--padding-top: 0 !important;\r\n    --wp--style--root--padding-right: 0 !important;\r\n    --wp--style--root--padding-bottom: 0 !important;\r\n    --wp--style--root--padding-left: 0 !important;\r\n  }\r\n\r\n  \/* Bloques Gutenberg envolventes *\/\r\n  body.page-id-9467 .wp-block-html,\r\n  body.page-id-9467 .wp-site-blocks,\r\n  body.page-id-9467 .is-layout-flow,\r\n  body.page-id-9467 .is-layout-constrained,\r\n  body.page-id-9467 .has-global-padding {\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    max-width: 100% !important;\r\n    width: 100% !important;\r\n  }\r\n\r\n  \/* El .vl-landing fuerza ancho viewport usando transform \u2014 m\u00e9todo bulletproof *\/\r\n  body.page-id-9467 .vl-landing {\r\n    width: 100vw !important;\r\n    max-width: 100vw !important;\r\n    position: relative !important;\r\n    left: 50% !important;\r\n    transform: translateX(-50%) !important;\r\n    margin: 0 !important;\r\n  }\r\n\r\n  \/* \u2500\u2500 3) Ocultar t\u00edtulo de p\u00e1gina del tema \u2500\u2500 *\/\r\n  body.page-id-9467 .entry-header,\r\n  body.page-id-9467 .ast-page-title-wrapper,\r\n  body.page-id-9467 .ast-archive-description,\r\n  body.page-id-9467 .entry-title,\r\n  body.page-id-9467 h1.entry-title,\r\n  body.page-id-9467 .page-title {\r\n    display: none !important;\r\n  }\r\n  body.page-id-9467 .entry-content > *:not(.vl-landing) { display: none; }\r\n\r\n  \/* \u2500\u2500 4) RESET BOTONES \u2014 Astra pinta TODOS los <button> con el color de marca (#E7FE15).\r\n        Hay que forzar nuestros colores espec\u00edficos en cada bot\u00f3n del mockup. \u2500\u2500 *\/\r\n  .vl-landing button,\r\n  .vl-landing .vl-btn {\r\n    box-shadow: none !important;\r\n    text-transform: none !important;\r\n    letter-spacing: normal !important;\r\n    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;\r\n  }\r\n\r\n  \/* File picker (Paso 1) \u2014 bot\u00f3n \"Subir informe\" *\/\r\n  .vl-landing .vl-mk-fp-btn {\r\n    background: #ECECEC !important;\r\n    color: #9A9A9A !important;\r\n    border: none !important;\r\n  }\r\n  .vl-landing .vl-mk-filepicker.is-visible .vl-mk-fp-btn.is-enabled,\r\n  .vl-landing .vl-mk-fp-btn.is-enabled {\r\n    background: #161616 !important;\r\n    color: #FFFFFF !important;\r\n  }\r\n\r\n  \/* Chat (Paso 2) \u2014 botones \"S\u00ed, generar\" \/ \"Ajustar\" \/ \u2715 *\/\r\n  .vl-landing .vl-mk-chat-btn {\r\n    background: #F2F2F2 !important;\r\n    color: #424242 !important;\r\n    border: 1px solid #E5E5E5 !important;\r\n  }\r\n  .vl-landing .vl-mk-chat-btn:hover {\r\n    background: #E5E5E5 !important;\r\n    border-color: #161616 !important;\r\n    color: #161616 !important;\r\n  }\r\n  .vl-landing .vl-mk-chat-btn--primary {\r\n    background: #161616 !important;\r\n    color: #FFFFFF !important;\r\n    border-color: #161616 !important;\r\n  }\r\n  .vl-landing .vl-mk-chat-btn--primary:hover {\r\n    background: #2C2C2C !important;\r\n    border-color: #2C2C2C !important;\r\n    color: #FFFFFF !important;\r\n  }\r\n  .vl-landing .vl-mk-chat-li-delete {\r\n    background: rgba(0,0,0,0.06) !important;\r\n    color: #161616 !important;\r\n    border: none !important;\r\n  }\r\n  .vl-landing .vl-mk-chat-li-delete:hover {\r\n    background: #FCEAEA !important;\r\n    color: #DC2626 !important;\r\n  }\r\n\r\n  \/* Editor (Paso 3) \u2014 botones de iconos formato\/longitud + acci\u00f3n \"Guardar plantilla\" *\/\r\n  .vl-landing .vl-mk-editor-icon-btn {\r\n    background: transparent !important;\r\n    color: #4B4B4B !important;\r\n    border: none !important;\r\n  }\r\n  .vl-landing .vl-mk-editor-icon-btn:hover { background: #F0F0F0 !important; }\r\n  .vl-landing .vl-mk-editor-icon-btn.is-active {\r\n    background: #E5E5E5 !important;\r\n    color: #161616 !important;\r\n  }\r\n  .vl-landing .vl-mk-editor-action {\r\n    background: #FFFFFF !important;\r\n    color: #424242 !important;\r\n    border: 1px solid #DDDDDD !important;\r\n  }\r\n  .vl-landing .vl-mk-editor-action:hover {\r\n    background: #F5F5F5 !important;\r\n    border-color: #161616 !important;\r\n    color: #161616 !important;\r\n  }\r\n  .vl-landing .vl-mk-editor-action--primary {\r\n    background: #161616 !important;\r\n    color: #FFFFFF !important;\r\n    border-color: #161616 !important;\r\n  }\r\n  .vl-landing .vl-mk-editor-action--primary:hover {\r\n    background: #2C2C2C !important;\r\n    border-color: #2C2C2C !important;\r\n    color: #FFFFFF !important;\r\n  }\r\n\r\n  \/* Editor (Paso 3, m\u00f3vil) \u2014 bot\u00f3n \"Listo\" *\/\r\n  .vl-landing .vl-mk-editor-done { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\r\n  .vl-landing .vl-mk-editor-done:hover { background: #2C2C2C !important; }\r\n\r\n  \/* Hero \u2014 bot\u00f3n \"Generar\" (negro de base \u2192 amarillo SOLO al generar) *\/\r\n  .vl-landing .vl-mk-genbtn { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\r\n  .vl-landing .vl-mk-genbtn:hover { background: #2C2C2C !important; }\r\n  .vl-landing .vl-mk-genbtn.is-done { background: #161616 !important; color: #FFFFFF !important; }\r\n  .vl-landing .vl-mk-genbtn.is-done:hover { background: #262626 !important; }\r\n  .vl-landing .vl-mk-genbtn .vl-gen-tick { color: #E7FE15 !important; }\r\n\r\n  \/* Hero \u2014 iconos Formato\/Longitud de la plantilla: GRISES (no amarillos del tema) + opciones del mini-men\u00fa *\/\r\n  .vl-landing .vl-mk-cfg-ico { background: #F2F2F2 !important; color: #6E6E6E !important; border: none !important; }\r\n  .vl-landing .vl-mk-cfg-ico:hover { background: #E6E6E6 !important; color: #161616 !important; }\r\n  .vl-landing .vl-mk-cfg-ico.is-open { background: #E2E2E2 !important; color: #161616 !important; }\r\n  .vl-landing .vl-mk-cfg-opt { background: transparent !important; color: #2A2A2A !important; border: none !important; }\r\n  .vl-landing .vl-mk-cfg-opt:hover { background: #F4F4F4 !important; }\r\n  .vl-landing .vl-mk-cfg-opt.is-active { background: #F0F0F0 !important; color: #161616 !important; }\r\n\r\n  \/* Hero \u2014 bot\u00f3n \"Guardar en Viterbit\" del mockup (negro; el \u2713 en amarillo solo sobre el negro) *\/\r\n  .vl-landing .vl-mk-genbtn { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\r\n<\/style>\r\n\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   VOICIT LANDING \u2014 Design System\r\n   Basado en gu\u00eda de marca oficial\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');\r\n\r\n\/* Reset dentro del contenedor *\/\r\n.vl-landing *, .vl-landing *::before, .vl-landing *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.vl-landing {\r\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;\r\n  color: #161616;\r\n  line-height: 1.6;\r\n  \/* overflow-x: clip evita scroll horizontal SIN romper position:sticky de los descendientes *\/\r\n  overflow-x: clip;\r\n  \/* Full-width breakout robusto: funciona si el parent es boxed (1200px) o ya es full-width.\r\n     calc(50% - 50vw) da un margin negativo solo cuando el parent es m\u00e1s estrecho que el viewport. *\/\r\n  width: 100vw;\r\n  margin-left: calc(50% - 50vw);\r\n  margin-right: calc(50% - 50vw);\r\n  position: relative;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Tipograf\u00eda \u2500\u2500\u2500 *\/\r\n.vl-landing h1 {\r\n  font-size: clamp(36px, 5vw, 56px);\r\n  font-weight: 800;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.02em;\r\n  color: #161616;\r\n}\r\n\/* BALANCE GLOBAL DE T\u00cdTULOS: todos los h1\/h2\/h3 reparten sus l\u00edneas de forma\r\n   equilibrada para que nunca quede una palabra hu\u00e9rfana sola en la \u00faltima l\u00ednea\r\n   (sobre todo en tablet\/m\u00f3vil). En desktop, los que caben en una l\u00ednea no se ven\r\n   afectados (balance es no-op). Se aplica SIEMPRE, sin necesidad de clases. *\/\r\n.vl-landing h1,\r\n.vl-landing h2,\r\n.vl-landing h3 {\r\n  text-wrap: pretty;\r\n  text-wrap: balance;\r\n}\r\n\r\n.vl-landing h2 {\r\n  font-size: clamp(28px, 3.5vw, 42px);\r\n  font-weight: 700;\r\n  line-height: 1.2;\r\n  letter-spacing: -0.01em;\r\n  color: #161616;\r\n}\r\n\r\n.vl-landing h3 {\r\n  font-size: clamp(20px, 2.5vw, 28px);\r\n  font-weight: 700;\r\n  line-height: 1.3;\r\n  color: #161616;\r\n}\r\n\r\n.vl-landing h4 {\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  color: #161616;\r\n}\r\n\r\n.vl-landing p {\r\n  font-size: 18px;\r\n  line-height: 1.7;\r\n  color: #424242;\r\n}\r\n\r\n.vl-landing .text-secondary {\r\n  color: #6E6E6E;\r\n}\r\n\r\n.vl-landing .text-small {\r\n  font-size: 15px;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Layout \u2500\u2500\u2500 *\/\r\n.vl-container {\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  padding: 0 24px;\r\n}\r\n\r\n.vl-container--narrow {\r\n  max-width: 900px;\r\n  margin: 0 auto;\r\n  padding: 0 24px;\r\n}\r\n\r\n.vl-section {\r\n  padding: 100px 0;\r\n}\r\n\r\n.vl-section--alt {\r\n  background: #F2F2F2;\r\n}\r\n\r\n.vl-section--dark {\r\n  background: #000000;\r\n  color: #FFFFFF;\r\n}\r\n\r\n\/* Bloque del CTA final \u2014 tarjeta oscura de esquinas redondeadas sobre fondo claro *\/\r\n.vl-cta-pill {\r\n  background: #161616;             \/* bloque OSCURO para que el CTA destaque sobre el fondo claro *\/\r\n  border-radius: 40px;            \/* rect\u00e1ngulo redondeado (antes 9999px = c\u00e1psula) *\/\r\n  padding: 56px 80px;\r\n  max-width: 980px;\r\n  margin: 0 auto;\r\n  color: #FFFFFF;\r\n  position: relative;\r\n  box-shadow: 0 26px 64px -28px rgba(0,0,0,0.5);\r\n}\r\n.vl-cta-pill h2 { color: #FFFFFF !important; }\r\n.vl-cta-pill p  { color: rgba(255,255,255,0.72) !important; }\r\n\/* Bot\u00f3n principal: amarillo de marca (permitido sobre oscuro) con destello sutil *\/\r\n.vl-cta-pill .vl-btn--brand {\r\n  background: #E7FE15 !important;\r\n  color: #161616 !important;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n.vl-cta-pill .vl-btn--brand:hover {\r\n  background: #E7FE15 !important;\r\n  box-shadow: 0 12px 26px -8px rgba(231,254,21,0.55);   \/* sin \"levantarse\" *\/\r\n}\r\n.vl-cta-pill .vl-btn--brand::after {\r\n  content: '';\r\n  position: absolute; top: 0; left: -65%; width: 42%; height: 100%;\r\n  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);\r\n  transform: skewX(-18deg);\r\n  pointer-events: none;\r\n  animation: vl-cta-sheen 3.8s ease-in-out infinite;\r\n}\r\n@keyframes vl-cta-sheen {\r\n  0%, 20%  { left: -65%; }\r\n  55%, 100% { left: 135%; }\r\n}\r\n@media (prefers-reduced-motion: reduce) { .vl-cta-pill .vl-btn--brand::after { animation: none; } }\r\n\/* Bot\u00f3n secundario en versi\u00f3n oscura *\/\r\n.vl-cta-pill .vl-btn--secondary {\r\n  background: transparent !important;\r\n  border-color: rgba(255,255,255,0.45) !important;\r\n  color: #FFFFFF !important;\r\n  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;\r\n}\r\n.vl-cta-pill .vl-btn--secondary:hover {\r\n  border-color: #FFFFFF !important;\r\n  background: rgba(255,255,255,0.10) !important;   \/* sin \"levantarse\" *\/\r\n}\r\n\/* Entrada por opacidad (el escalado\/formaci\u00f3n al hacer scroll los controla el JS) *\/\r\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%; }\r\n.vl-cta-pill.is-shown { opacity: 1; }\r\n\/* CTA din\u00e1mico: el t\u00edtulo cambia de color (negro\u2194blanco) con buen contraste seg\u00fan se forma la p\u00edldora *\/\r\n.vl-cta-pill h2 { transition: color 0.25s ease; will-change: color, transform; transform-origin: center; }\r\n.vl-cta-pill p, .vl-cta-pill > div { will-change: opacity, transform; }\r\n\/* CTA con SCROLL-JACK: primero la frase grande, luego se forma la p\u00edldora y el texto se comprime *\/\r\n.vl-cta-section { position: relative; }\r\n.vl-cta-track { position: relative; height: 150vh; }\r\n.vl-cta-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }\r\n@media (max-width: 1024px) {\r\n  .vl-cta-track { height: auto; }\r\n  .vl-cta-sticky { position: static; height: auto; padding: 80px 0 100px; }\r\n}\r\n@media (max-width: 768px) {\r\n  .vl-cta-pill {\r\n    padding: 56px 28px;\r\n    border-radius: 36px;\r\n  }\r\n}\r\n@media (max-width: 480px) {\r\n  .vl-cta-pill {\r\n    padding: 48px 22px;\r\n    border-radius: 28px;\r\n  }\r\n}\r\n\r\n.vl-section--dark h2,\r\n.vl-section--dark h3,\r\n.vl-section--dark h4 {\r\n  color: #FFFFFF;\r\n}\r\n\r\n.vl-section--dark p {\r\n  color: #B0B0B0;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Botones \u2500\u2500\u2500 *\/\r\n.vl-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 16px 32px;\r\n  font-family: 'Manrope', sans-serif;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  border-radius: 12px;\r\n  text-decoration: none !important;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  border: none;\r\n}\r\n\r\n.vl-btn--primary {\r\n  background: #161616 !important;\r\n  color: #FFFFFF !important;\r\n}\r\n\r\n.vl-btn--primary:hover {\r\n  background: #2C2C2C !important;\r\n}\r\n\r\n.vl-btn--secondary {\r\n  background: transparent !important;\r\n  color: #161616 !important;\r\n  border: 2px solid #DCDCDC;\r\n}\r\n\r\n.vl-btn--secondary:hover {\r\n  border-color: #161616;\r\n}\r\n\/* En el Hero el bot\u00f3n secundario va sobre los puntitos: fondo opaco (mismo gris) para que NO se transparenten a trav\u00e9s de \u00e9l *\/\r\n.vl-hero-actions .vl-btn--secondary { background: #F8F8F8 !important; }\r\n\r\n.vl-btn--brand {\r\n  background: #E7FE15 !important;\r\n  color: #161616 !important;\r\n  font-weight: 700;\r\n}\r\n\r\n.vl-btn--brand:hover {\r\n  background: #CDE213 !important;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Badge \u2500\u2500\u2500 *\/\r\n.vl-badge {\r\n  display: inline-block;\r\n  padding: 6px 16px;\r\n  border-radius: 100px;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n.vl-badge--brand {\r\n  background: #161616;\r\n  color: #E7FE15;\r\n}\r\n\r\n.vl-badge--green {\r\n  background: #DBF0DE;\r\n  color: #29A63B;\r\n}\r\n\r\n.vl-badge--blue {\r\n  background: #E5F5FC;\r\n  color: #63C2ED;\r\n}\r\n\r\n.vl-badge--orange {\r\n  background: #FCE9DF;\r\n  color: #ED7840;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Cards \u2500\u2500\u2500 *\/\r\n.vl-card {\r\n  background: #FFFFFF;\r\n  border: 1px solid #DCDCDC;\r\n  border-radius: 16px;\r\n  padding: 36px;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.vl-card:hover {\r\n  box-shadow: 0 8px 32px rgba(0,0,0,0.08);\r\n  transform: translateY(-4px);\r\n}\r\n\r\n.vl-card--dark {\r\n  background: #161616;\r\n  border-color: #2C2C2C;\r\n  color: #FFFFFF;\r\n}\r\n\r\n.vl-card--dark h3, .vl-card--dark h4 {\r\n  color: #FFFFFF;\r\n}\r\n\r\n.vl-card--dark p {\r\n  color: #9A9A9A;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Grid \u2500\u2500\u2500 *\/\r\n.vl-grid-2 {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 32px;\r\n}\r\n\r\n.vl-grid-3 {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Screenshot mock \u2500\u2500\u2500 *\/\r\n.vl-screenshot {\r\n  width: 100%;\r\n  border-radius: 16px;\r\n  border: 1px solid #DCDCDC;\r\n  box-shadow: 0 16px 48px rgba(0,0,0,0.1);\r\n  overflow: hidden;\r\n}\r\n\r\n.vl-screenshot img {\r\n  width: 100%;\r\n  height: auto;\r\n  display: block;\r\n}\r\n\r\n\/* Placeholder para screenshots (reemplazar con img reales) *\/\r\n.vl-screenshot-placeholder {\r\n  width: 100%;\r\n  aspect-ratio: 16\/10;\r\n  border-radius: 16px;\r\n  border: 2px dashed #DCDCDC;\r\n  background: #FAFAFA;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 14px;\r\n  color: #9A9A9A;\r\n  text-align: center;\r\n  padding: 20px;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Iconos decorativos \u2500\u2500\u2500 *\/\r\n.vl-icon {\r\n  width: 56px;\r\n  height: 56px;\r\n  border-radius: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 24px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.vl-icon--brand {\r\n  background: #161616;\r\n  color: #E7FE15;\r\n}\r\n\r\n.vl-icon--light {\r\n  background: #F2F2F2;\r\n  color: #161616;\r\n}\r\n\r\n.vl-icon img {\r\n  width: 32px;\r\n  height: 32px;\r\n  object-fit: contain;\r\n}\r\n\r\n.vl-icon img.vl-icon-invert {\r\n  filter: invert(1);\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Tooltip info icon \u2500\u2500\u2500 *\/\r\n.vl-info-tooltip {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  cursor: default;\r\n  margin-left: 6px;\r\n  vertical-align: middle;\r\n}\r\n\r\n.vl-info-tooltip .vl-info-icon {\r\n  width: 18px;\r\n  height: 18px;\r\n  border-radius: 50%;\r\n  background: #E8E8E8;\r\n  color: #777;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n  transition: background 0.2s;\r\n}\r\n\r\n.vl-info-tooltip:hover .vl-info-icon {\r\n  background: #D0D0D0;\r\n  color: #444;\r\n}\r\n\r\n.vl-info-tooltip .vl-info-text {\r\n  position: absolute;\r\n  bottom: calc(100% + 10px);\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  font-size: 13px;\r\n  font-weight: 400;\r\n  line-height: 1.5;\r\n  padding: 12px 16px;\r\n  border-radius: 10px;\r\n  width: 320px;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: opacity 0.25s, visibility 0.25s;\r\n  pointer-events: none;\r\n  z-index: 10;\r\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\r\n}\r\n\r\n.vl-info-tooltip .vl-info-text::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  border: 6px solid transparent;\r\n  border-top-color: #161616;\r\n}\r\n\r\n.vl-info-tooltip:hover .vl-info-text {\r\n  opacity: 1;\r\n  visibility: visible;\r\n}\r\n\r\n\/* \u2500\u2500 Card flip on hover \u2500\u2500 *\/\r\n.vl-card--flip {\r\n  position: relative;\r\n  min-height: 120px;\r\n  cursor: default;\r\n}\r\n.vl-card-flip-front {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 20px;\r\n}\r\n.vl-card-flip-front h4 {\r\n  font-size: 20px;\r\n  margin: 0;\r\n}\r\n.vl-card-flip-back {\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0; bottom: 0;\r\n  background: #FFFFFF;\r\n  border-radius: 16px;\r\n  padding: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n  pointer-events: none;\r\n  z-index: 2;\r\n}\r\n.vl-card--flip:hover .vl-card-flip-back {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Separador gradiente Voicit \u2500\u2500\u2500 *\/\r\n.vl-gradient-bar {\r\n  height: 4px;\r\n  background: linear-gradient(90deg, #E7FE15 0%, #B8CC76 50%, #56AB91 100%);\r\n  border-radius: 2px;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Step indicator \u2500\u2500\u2500 *\/\r\n.vl-step-number {\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 50%;\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 20px;\r\n  font-weight: 800;\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\/* Alinear verticalmente el n\u00famero del paso con su t\u00edtulo (Astra mete margin al h3) *\/\r\n.vl-step-row .vl-step-number + h3,\r\n.vl-landing .vl-step-row h3 {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  line-height: 1.25;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Animaciones (scroll reveal) \u2500\u2500\u2500 *\/\r\n.vl-reveal {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: opacity 0.7s ease, transform 0.7s ease;\r\n}\r\n\r\n.vl-reveal.is-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n.vl-reveal-delay-1 { transition-delay: 0.1s; }\r\n.vl-reveal-delay-2 { transition-delay: 0.2s; }\r\n.vl-reveal-delay-3 { transition-delay: 0.3s; }\r\n\r\n\/* Animaci\u00f3n float suave para screenshots *\/\r\n@keyframes vl-float {\r\n  0%, 100% { transform: translateY(0px); }\r\n  50% { transform: translateY(-10px); }\r\n}\r\n\r\n.vl-float {\r\n  animation: vl-float 4s ease-in-out infinite;\r\n}\r\n\r\n\/* Pulse para CTAs *\/\r\n@keyframes vl-pulse {\r\n  0%, 100% { box-shadow: 0 0 0 0 rgba(231,254,21,0.4); }\r\n  50% { box-shadow: 0 0 0 12px rgba(231,254,21,0); }\r\n}\r\n\r\n.vl-pulse {\r\n  animation: vl-pulse 2.5s ease-in-out infinite;\r\n}\r\n\r\n\/* Gradiente de fondo animado (hero) *\/\r\n@keyframes vl-gradient-move {\r\n  0% { background-position: 0% 50%; }\r\n  50% { background-position: 100% 50%; }\r\n  100% { background-position: 0% 50%; }\r\n}\r\n\r\n\/* Ticker \/ marquee logos *\/\r\n@keyframes vl-scroll {\r\n  0% { transform: translateX(0); }\r\n  100% { transform: translateX(-50%); }\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Testimonial \u2500\u2500\u2500 *\/\r\n.vl-testimonial {\r\n  background: #FFFFFF;\r\n  border-radius: 16px;\r\n  padding: 36px;\r\n  border: 1px solid #DCDCDC;\r\n  position: relative;\r\n}\r\n\r\n.vl-testimonial::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 24px;\r\n  left: 28px;\r\n  width: 40px;\r\n  height: 27px;\r\n  background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='44' height='30' viewBox='0 0 44 30'%3E%3Cpath d='M5 2 L19 2 L13 28 L1 28 Z' fill='%23E7FE15'\/%3E%3Cpath d='M26 2 L40 2 L34 28 L22 28 Z' fill='%23E7FE15'\/%3E%3C\/svg%3E\") no-repeat center \/ contain;\r\n}\r\n\r\n.vl-testimonial-text {\r\n  font-size: 17px;\r\n  line-height: 1.7;\r\n  color: #424242;\r\n  font-style: italic;\r\n  padding-top: 28px;\r\n}\r\n\r\n.vl-testimonial-author {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  margin-top: 24px;\r\n}\r\n\r\n.vl-testimonial-avatar {\r\n  width: 56px;\r\n  height: 56px;\r\n  border-radius: 50%;\r\n  background: #F2F2F2;\r\n  overflow: hidden;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.vl-testimonial-avatar img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.vl-testimonial-name {\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n}\r\n\r\n.vl-testimonial-role {\r\n  font-size: 13px;\r\n  color: #6E6E6E;\r\n  line-height: 1.4;\r\n}\r\n\r\n.vl-testimonials-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 24px;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .vl-testimonials-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n  }\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Testimonial sticky-stack \u2500\u2500\u2500 *\/\r\n.vl-tstack-section { position: relative; }\r\n\r\n\/* Track de scroll. Con una sola resena no hace falta reservar un viewport por\r\n   tarjeta: 140vh basta para que entre y se lea sin dejar un scroll vacio. *\/\r\n.vl-tstack-track {\r\n  position: relative;\r\n  height: 140vh;\r\n}\r\n\r\n\/* El contenido se queda fijo mientras dura el track *\/\r\n.vl-tstack-sticky {\r\n  position: sticky;\r\n  top: 0;\r\n  height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: stretch;\r\n  overflow: hidden;\r\n  padding: 60px 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* Contenedor de las cards (apiladas en absoluto) *\/\r\n.vl-tstack-cards {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 620px;\r\n  margin: 0 auto;\r\n  min-height: 280px;\r\n}\r\n\r\n\/* Cada card empieza fuera de pantalla (abajo) y entra al llegar su turno *\/\r\n.vl-tstack-card {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  width: 100%;\r\n  margin: 0;\r\n  transform: translateY(120vh);\r\n  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);\r\n  background: #FFFFFF;\r\n  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.15);\r\n}\r\n.vl-tstack-card[data-tstack-idx=\"0\"] { z-index: 1; }\r\n.vl-tstack-card[data-tstack-idx=\"1\"] { z-index: 2; }\r\n.vl-tstack-card[data-tstack-idx=\"2\"] { z-index: 3; }\r\n\r\n.vl-tstack-card.is-visible {\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* Las cards detr\u00e1s se mueven ligeramente arriba con cada nueva,\r\n   creando sensaci\u00f3n de \"pila de cartas\" *\/\r\n.vl-tstack-card.is-behind-1 { transform: translateY(-14px) scale(0.97); }\r\n.vl-tstack-card.is-behind-2 { transform: translateY(-26px) scale(0.94); }\r\n.vl-tstack-card.is-behind-3 { transform: translateY(-36px) scale(0.91); }\r\n\r\n\/* En m\u00f3vil el sticky-stack se mantiene activo (queremos la animaci\u00f3n apilada tambi\u00e9n en vertical).\r\n   Ajustes espec\u00edficos para m\u00f3vil est\u00e1n en el bloque de auditor\u00eda @media al final del CSS. *\/\r\n\r\n.vl-testimonial--compact {\r\n  padding: 32px 32px 28px;\r\n}\r\n\r\n.vl-testimonial-rating {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  border-radius: 100px;\r\n  padding: 10px 18px;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.vl-testimonial-rating .vl-stars {\r\n  color: #E7FE15;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n.vl-testimonial-avatar--initials {\r\n  background: linear-gradient(135deg, #1F1F1F 0%, #3A3A3A 100%);\r\n  color: #FFFFFF;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-weight: 700;\r\n  font-size: 16px;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 FAQ (estilo minimalista, chevron a la izquierda) \u2500\u2500\u2500 *\/\r\n.vl-faq details {\r\n  background: transparent;\r\n  border: none;\r\n  border-bottom: 1px solid #ECECEC;\r\n  border-radius: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n}\r\n.vl-faq details:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.vl-faq summary {\r\n  list-style: none;\r\n  cursor: pointer;\r\n  padding: 20px 0 20px 36px;\r\n  font-size: 17px;\r\n  font-weight: 500;\r\n  color: #161616;\r\n  display: block;\r\n  position: relative;\r\n  transition: color 0.2s;\r\n}\r\n.vl-faq summary:hover {\r\n  color: #424242;\r\n}\r\n\r\n.vl-faq summary::-webkit-details-marker { display: none; }\r\n\r\n\/* Chevron a la izquierda del texto, construido con bordes CSS (sin imagen) *\/\r\n.vl-faq summary::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 8px;\r\n  top: 50%;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-right: 2px solid #161616;\r\n  border-bottom: 2px solid #161616;\r\n  transform: translateY(-75%) rotate(45deg);\r\n  transition: transform 0.25s ease;\r\n}\r\n.vl-faq details[open] summary::before {\r\n  transform: translateY(-25%) rotate(-135deg);\r\n}\r\n\r\n.vl-faq .vl-faq-answer {\r\n  padding: 0 0 20px 36px;\r\n  font-size: 15.5px;\r\n  line-height: 1.65;\r\n  color: #6E6E6E;\r\n}\r\n\/* La respuesta aparece de forma org\u00e1nica, de arriba hacia abajo, al abrir *\/\r\n.vl-faq details[open] .vl-faq-answer { animation: vl-faq-open 0.4s cubic-bezier(0.22,1,0.36,1); }\r\n@keyframes vl-faq-open {\r\n  from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); }\r\n  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }\r\n}\r\n@media (prefers-reduced-motion: reduce) { .vl-faq details[open] .vl-faq-answer { animation: none; } }\r\n\r\n\/* \u2500\u2500\u2500 Logos marquee \u2500\u2500\u2500 *\/\r\n.vl-logos-track {\r\n  display: flex;\r\n  align-items: center;\r\n  width: max-content;\r\n  animation: vl-scroll 33s linear infinite;\r\n}\r\n\r\n.vl-logos-track img {\r\n  height: 32px;\r\n  width: auto;\r\n  max-width: 150px;\r\n  object-fit: contain;\r\n  margin-right: 72px;\r\n  flex-shrink: 0;\r\n  opacity: 0.6;\r\n  filter: grayscale(100%);\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n\r\n\/* Override espec\u00edfico: el logo de ieTeam tiene mucho aire transparente\r\n   alrededor de su PNG y queda visualmente peque\u00f1o. Le subimos altura. *\/\r\n.vl-logos-track img[alt=\"ieTeam\"] {\r\n  height: 60px;\r\n  max-width: 210px;\r\n}\r\n\r\n.vl-logos-track img:hover {\r\n  opacity: 1;\r\n  filter: grayscale(0%);\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Google rating \u2500\u2500\u2500 *\/\r\n.vl-google-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  background: #ECECEC;\r\n  color: #2A2A2A;\r\n  padding: 12px 24px;\r\n  border-radius: 100px;\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n}\r\n\r\n.vl-google-badge svg {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n.vl-stars {\r\n  color: #E0A100;\r\n  letter-spacing: 2px;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500 *\/\r\n@media (max-width: 900px) {\r\n  .vl-grid-2, .vl-grid-3 {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .vl-section {\r\n    padding: 64px 0;\r\n  }\r\n\r\n  .vl-hero-flex {\r\n    flex-direction: column;\r\n    text-align: center;\r\n  }\r\n\r\n  .vl-hero-actions {\r\n    justify-content: center;\r\n  }\r\n\r\n  .vl-step-row {\r\n    flex-direction: column;\r\n  }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .vl-landing h1 {\r\n    font-size: 32px;\r\n  }\r\n\r\n  .vl-landing h2 {\r\n    font-size: 26px;\r\n  }\r\n\r\n  .vl-btn {\r\n    padding: 14px 24px;\r\n    font-size: 15px;\r\n    width: 100%;\r\n    justify-content: center;\r\n  }\r\n\r\n  .vl-hero-actions {\r\n    flex-direction: column;\r\n    width: 100%;\r\n  }\r\n\r\n  .vl-card {\r\n    padding: 28px 24px;\r\n  }\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Utilidades \u2500\u2500\u2500 *\/\r\n.vl-text-center { text-align: center; }\r\n\/* \u2500\u2500\u2500 Mockup Hero: PDF \u2192 IA \u2192 Plantilla \u2500\u2500\u2500 *\/\r\n.vl-hero-mockup {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  gap: 0;\r\n  position: relative;\r\n}\r\n\r\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 *\/\r\n.vl-mk-dropzone {\r\n  position: relative;\r\n  align-self: stretch;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 96px;\r\n  padding: 16px;\r\n  border: 2px dashed #C5C5C5;\r\n  border-radius: 12px;\r\n  background: rgba(255,255,255,0.5);\r\n  margin-bottom: 4px;\r\n  transition: border-color 0.4s ease, background 0.4s ease;\r\n  animation: vl-dropzone-soften 0.5s ease-out 1.4s forwards;\r\n}\r\n@keyframes vl-dropzone-soften {\r\n  to {\r\n    border-color: #ECECEC;\r\n    background: transparent;\r\n  }\r\n}\r\n\r\n\/* Hint inicial dentro del dropzone *\/\r\n.vl-mk-dropzone-hint {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 6px;\r\n  color: #9A9A9A;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.2px;\r\n  pointer-events: none;\r\n  animation: vl-hint-out 0.4s ease-out 1.0s forwards;\r\n}\r\n@keyframes vl-hint-out {\r\n  to { opacity: 0; visibility: hidden; }\r\n}\r\n\r\n\/* PDF que entra desde fuera *\/\r\n.vl-mk-pdf-wrapper {\r\n  position: relative;\r\n  opacity: 0;\r\n  transform: translate(70px, -50px);\r\n  animation: vl-pdf-drop 1.0s cubic-bezier(0.34, 1.15, 0.64, 1) 0.45s forwards;\r\n}\r\n@keyframes vl-pdf-drop {\r\n  0%   { opacity: 0; transform: translate(70px, -50px); }\r\n  30%  { opacity: 1; }\r\n  100% { opacity: 1; transform: translate(0, 0); }\r\n}\r\n.vl-mk-pdf {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  background: #FFFFFF;\r\n  border: 1.5px solid #E5E5E5;\r\n  border-radius: 12px;\r\n  padding: 12px 16px 12px 12px;\r\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);\r\n  transform: rotate(-2deg);\r\n}\r\n.vl-mk-pdf-icon { flex-shrink: 0; }\r\n.vl-mk-pdf-name {\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n  line-height: 1.2;\r\n}\r\n.vl-mk-pdf-size {\r\n  font-size: 11px;\r\n  color: #9A9A9A;\r\n  margin-top: 2px;\r\n}\r\n.vl-mk-cursor {\r\n  position: absolute;\r\n  bottom: -10px;\r\n  right: -6px;\r\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));\r\n  opacity: 0;\r\n  animation: vl-cursor-show 0.3s ease-out 0.45s forwards, vl-cursor-bob 2.6s ease-in-out 1.5s infinite;\r\n}\r\n@keyframes vl-cursor-show {\r\n  to { opacity: 1; }\r\n}\r\n@keyframes vl-cursor-bob {\r\n  0%, 100% { transform: translate(0,0); }\r\n  50%      { transform: translate(-4px,-3px); }\r\n}\r\n\r\n\/* Flechas conectoras \u2014 aparecen despu\u00e9s de la fase anterior *\/\r\n.vl-mk-arrow {\r\n  align-self: center;\r\n  display: flex;\r\n  justify-content: center;\r\n  height: 16px;          \/* antes 28px *\/\r\n  margin: 6px 0;         \/* antes 10px \u2192 huella 28px por flecha en vez de 48px *\/\r\n  opacity: 0;\r\n  transform: translateY(-4px);\r\n  animation: vl-fade-down 0.35s ease-out forwards;\r\n}\r\n.vl-mk-arrow--1 { animation-delay: 1.55s; }\r\n.vl-mk-arrow--2 { animation-delay: 2.45s; }\r\n@keyframes vl-fade-down {\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* M\u00e1quina Voicit \u2014 aparece despu\u00e9s de la flecha 1 *\/\r\n.vl-mk-machine {\r\n  position: relative;\r\n  align-self: center;\r\n  background: #161616;\r\n  border-radius: 12px;\r\n  padding: 14px 20px;\r\n  min-width: 220px;\r\n  overflow: hidden;\r\n  opacity: 0;\r\n  transform: translateY(-4px);\r\n  animation: vl-fade-down 0.4s ease-out 1.85s forwards;\r\n}\r\n.vl-mk-machine-pulse {\r\n  display: none;\r\n}\r\n.vl-mk-machine-content {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n}\r\n.vl-mk-machine-logo {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #FFFFFF;\r\n}\r\n.vl-mk-machine-logo .vl-mk-gear path { fill: #E7FE15; }\r\n\r\n\/* Engranaje girando sobre su propio eje *\/\r\n.vl-mk-gear {\r\n  transform-origin: center;\r\n  transform-box: fill-box;\r\n  animation: vl-spin 7s linear infinite;\r\n}\r\n@keyframes vl-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Orbe animado (sustituye al engranaje): peque\u00f1o, colores de marca, en movimiento continuo *\/\r\n.vl-orb { position: relative; width: 22px; height: 22px; flex-shrink: 0; }\r\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; }\r\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%); }\r\n.vl-orb canvas { display: block; width: 100%; height: 100%; }\r\n\/* Variante del orbe como avatar del chat (paso 2): rellena el c\u00edrculo de 34px *\/\r\n.vl-orb--avatar { width: 34px; height: 34px; }\r\n.vl-orb--avatar .vl-orb-glow { filter: blur(4px); opacity: 0.4; width: 135%; height: 135%; }\r\n\r\n.vl-mk-machine-status {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 12px;\r\n}\r\n.vl-mk-dot {\r\n  flex-shrink: 0;\r\n  width: 22px;          \/* mismo ancho que el orbe \u2192 su punto queda centrado a 11px (alineado con el orbe)\r\n                           y el texto \"Analizando\u2026\" empieza a la misma x que \"Agente IA de plantillas\" *\/\r\n  height: 18px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.vl-mk-dot::before {\r\n  content: '';\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 50%;\r\n  background: #E7FE15;\r\n  animation: vl-blink 1.4s ease-in-out infinite;\r\n}\r\n@keyframes vl-blink {\r\n  0%, 100% { opacity: 1; }\r\n  50%      { opacity: 0.3; }\r\n}\r\n\r\n\/* Shimmer en el texto \"Analizando estructura...\" \u2014 estilo ChatGPT\/Claude *\/\r\n.vl-mk-shimmer {\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(154,154,154,1) 0%,\r\n    rgba(154,154,154,1) 35%,\r\n    rgba(255,255,255,1) 50%,\r\n    rgba(154,154,154,1) 65%,\r\n    rgba(154,154,154,1) 100%\r\n  );\r\n  background-size: 250% 100%;\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  color: transparent;\r\n  animation: vl-shimmer 2.2s linear infinite;\r\n}\r\n@keyframes vl-shimmer {\r\n  0%   { background-position: 200% 0; }\r\n  100% { background-position: -200% 0; }\r\n}\r\n\r\n\/* Plantilla generada *\/\r\n.vl-mk-template {\r\n  background: #FFFFFF;\r\n  border: 1.5px solid #E5E5E5;\r\n  border-radius: 12px;\r\n  padding: 16px 18px;\r\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.08);\r\n  opacity: 0;\r\n  transform: translateY(-4px);\r\n  animation: vl-fade-down 0.4s ease-out 2.75s forwards;\r\n}\r\n.vl-mk-template-head {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n  padding-bottom: 10px;\r\n  margin-bottom: 10px;\r\n  border-bottom: 1px solid #F0F0F0;\r\n}\r\n.vl-mk-template-title {\r\n  font-size: 12.5px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n  line-height: 1.3;\r\n}\r\n.vl-mk-badge-ok {\r\n  flex-shrink: 0;\r\n  background: #E7FE15;\r\n  color: #161616;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  padding: 3px 8px;\r\n  border-radius: 100px;\r\n  letter-spacing: 0.3px;\r\n  white-space: nowrap;\r\n}\r\n.vl-mk-section-list {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n.vl-mk-section-list li {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  font-size: 12.5px;\r\n  color: #424242;\r\n  font-weight: 500;\r\n  opacity: 0;\r\n  animation: vl-li-fade 0.45s ease-out forwards;\r\n}\r\n.vl-mk-section-list li:nth-child(1) { animation-delay: 3.1s; }\r\n.vl-mk-section-list li:nth-child(2) { animation-delay: 3.7s; }\r\n.vl-mk-section-list li:nth-child(3) { animation-delay: 4.3s; }\r\n.vl-mk-section-list li:nth-child(4) { animation-delay: 4.9s; }\r\n.vl-mk-section-list li:nth-child(5) { animation-delay: 5.5s; }\r\n@keyframes vl-li-fade {\r\n  from { opacity: 0; transform: translateX(-6px); }\r\n  to   { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n\/* Texto de cada secci\u00f3n: efecto typewriter de izquierda a derecha *\/\r\n.vl-mk-section-text {\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  max-width: 0;\r\n  animation: vl-typewriter 0.55s steps(24, end) forwards;\r\n}\r\n.vl-mk-section-list li:nth-child(1) .vl-mk-section-text { animation-delay: 3.15s; }\r\n.vl-mk-section-list li:nth-child(2) .vl-mk-section-text { animation-delay: 3.75s; }\r\n.vl-mk-section-list li:nth-child(3) .vl-mk-section-text { animation-delay: 4.35s; }\r\n.vl-mk-section-list li:nth-child(4) .vl-mk-section-text { animation-delay: 4.95s; }\r\n.vl-mk-section-list li:nth-child(5) .vl-mk-section-text { animation-delay: 5.55s; }\r\n@keyframes vl-typewriter {\r\n  to { max-width: 260px; }\r\n}\r\n\r\n\/* Config de cada secci\u00f3n (formato + longitud) a la derecha \u2014 estilo paso 3 *\/\r\n.vl-mk-cfg {\r\n  margin-left: auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  flex-shrink: 0;\r\n  opacity: 0;\r\n  animation: vl-cfg-fade 0.4s ease-out forwards;\r\n}\r\n.vl-mk-section-list li:nth-child(1) .vl-mk-cfg { animation-delay: 3.55s; }\r\n.vl-mk-section-list li:nth-child(2) .vl-mk-cfg { animation-delay: 4.15s; }\r\n.vl-mk-section-list li:nth-child(3) .vl-mk-cfg { animation-delay: 4.75s; }\r\n.vl-mk-section-list li:nth-child(4) .vl-mk-cfg { animation-delay: 5.35s; }\r\n.vl-mk-section-list li:nth-child(5) .vl-mk-cfg { animation-delay: 5.95s; }\r\n@keyframes vl-cfg-fade {\r\n  from { opacity: 0; transform: scale(0.85); }\r\n  to   { opacity: 1; transform: scale(1); }\r\n}\r\n.vl-mk-cfg-ico {\r\n  width: 24px; height: 24px;\r\n  display: inline-flex; align-items: center; justify-content: center;\r\n  border-radius: 6px;\r\n  background: #F2F2F2;\r\n  color: #6E6E6E;\r\n}\r\n\/* \u2500\u2500 Bot\u00f3n \"Guardar en Viterbit\" del Hero \u2014 CUADRADO de esquinas redondeadas\r\n      (antes era una p\u00edldora de 116\u00d722 y se ve\u00eda alargado). \u2500\u2500 *\/\r\n.vl-mk-genbtn {\r\n  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;\r\n  -webkit-appearance: none; appearance: none;\r\n  background: #161616; color: #FFFFFF;\r\n  font-size: 10.5px; font-weight: 700; padding: 6px 12px;\r\n  border-radius: 8px; letter-spacing: 0.2px; white-space: nowrap; line-height: 1.35;\r\n  transition: background-color .45s ease, color .45s ease, opacity .35s ease;\r\n}\r\n.vl-mk-genbtn.is-generating { opacity: .8; }\r\n.vl-mk-genbtn.is-done { background: #161616; color: #FFFFFF; animation: vl-genfade .55s ease; }\r\n.vl-mk-genbtn .vl-gen-tick { color: #E7FE15; font-weight: 800; }\r\n@keyframes vl-genfade { from { opacity: .45; } to { opacity: 1; } }\r\n\r\n\/* \u2500\u2500 Iconos de config como botones + mini-men\u00fa de selecci\u00f3n \u2500\u2500 *\/\r\n.vl-mk-cfg-ico { border: none; cursor: pointer; font-family: inherit; padding: 0; -webkit-appearance: none; appearance: none; transition: background-color .18s ease, color .18s ease; position: relative; }\r\n.vl-mk-cfg-ico:hover { background: #E6E6E6; color: #161616; }\r\n.vl-mk-cfg-ico.is-open { background: #E2E2E2; color: #161616; }\r\n.vl-mk-cfg-glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }\r\n.vl-mk-cfg-menu {\r\n  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;\r\n  background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 10px;\r\n  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.28);\r\n  padding: 5px; min-width: 150px;\r\n  display: flex; flex-direction: column; gap: 2px;\r\n  transform-origin: top right; animation: vl-cfgmenu-in .16s ease-out;\r\n}\r\n.vl-mk-cfg-menu.vl-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }\r\n@keyframes vl-cfgmenu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }\r\n.vl-mk-cfg-opt {\r\n  display: flex; align-items: center; gap: 9px;\r\n  padding: 7px 9px; border-radius: 7px; cursor: pointer;\r\n  font-size: 12px; font-weight: 600; color: #2A2A2A; white-space: nowrap;\r\n  border: none; background: transparent; width: 100%; text-align: left; font-family: inherit;\r\n  -webkit-appearance: none; appearance: none;\r\n}\r\n.vl-mk-cfg-opt:hover { background: #F4F4F4; }\r\n.vl-mk-cfg-opt.is-active { background: #F0F0F0; color: #161616; }\r\n.vl-mk-cfg-opt-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #6E6E6E; flex-shrink: 0; }\r\n.vl-mk-cfg-opt.is-active .vl-mk-cfg-opt-ico { color: #161616; }\r\n\r\n.vl-mk-check {\r\n  flex-shrink: 0;\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 50%;\r\n  background: #161616;\r\n  color: #E7FE15;\r\n  font-size: 9px;\r\n  font-weight: 800;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 1;\r\n  opacity: 0;\r\n  transform: scale(0.4);\r\n  animation: vl-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\r\n}\r\n.vl-mk-section-list li:nth-child(1) .vl-mk-check { animation-delay: 3.70s; }\r\n.vl-mk-section-list li:nth-child(2) .vl-mk-check { animation-delay: 4.30s; }\r\n.vl-mk-section-list li:nth-child(3) .vl-mk-check { animation-delay: 4.90s; }\r\n.vl-mk-section-list li:nth-child(4) .vl-mk-check { animation-delay: 5.50s; }\r\n.vl-mk-section-list li:nth-child(5) .vl-mk-check { animation-delay: 6.10s; }\r\n@keyframes vl-check-pop {\r\n  to { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MOCKUP PASO 1 \u2014 File picker\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-mk-filepicker {\r\n  position: relative;\r\n  background: #FFFFFF;\r\n  border-radius: 14px;\r\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\r\n  border: 1px solid #E8E8E8;\r\n  max-width: 560px;\r\n  margin: 0 auto;\r\n}\r\n.vl-mk-fp-header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  padding: 12px 16px;\r\n  border-bottom: 1px solid #EEEEEE;\r\n  background: #FAFAFA;\r\n  border-top-left-radius: 14px;\r\n  border-top-right-radius: 14px;\r\n}\r\n.vl-mk-fp-dots { display: flex; gap: 6px; }\r\n.vl-mk-fp-dots span {\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 50%;\r\n  background: #D8D8D8;\r\n}\r\n.vl-mk-fp-dots span:nth-child(1) { background: #FF5F57; }\r\n.vl-mk-fp-dots span:nth-child(2) { background: #FEBC2E; }\r\n.vl-mk-fp-dots span:nth-child(3) { background: #28C840; }\r\n.vl-mk-fp-title {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: #424242;\r\n}\r\n.vl-mk-fp-grid {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 10px;\r\n  padding: 18px;\r\n}\r\n.vl-mk-fp-file {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px;\r\n  border-radius: 10px;\r\n  background: #F7F7F7;\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: border-color 0.25s ease, background 0.25s ease;\r\n  min-width: 0;        \/* permite que el item del grid se encoja y el nombre haga ellipsis *\/\r\n  overflow: hidden;\r\n}\r\n.vl-mk-fp-file:hover {\r\n  background: #F0F0F0;\r\n}\r\n.vl-mk-fp-file.is-selected {\r\n  background: #EAEAEA;\r\n  border-color: #161616;\r\n}\r\n.vl-mk-fp-name {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: #2A2A2A;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  min-width: 0;\r\n  flex: 1 1 auto;\r\n}\r\n.vl-mk-fp-actions {\r\n  padding: 14px 18px 18px;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n}\r\n.vl-mk-fp-btn {\r\n  background: #ECECEC;\r\n  color: #9A9A9A;\r\n  border: none;\r\n  border-radius: 8px;\r\n  padding: 10px 18px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  font-family: inherit;\r\n  cursor: default;\r\n  transition: background 0.3s ease, color 0.3s ease;\r\n}\r\n.vl-mk-fp-btn.is-enabled {\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  cursor: pointer;\r\n}\r\n.vl-mk-fp-btn.is-enabled:hover {\r\n  background: #2C2C2C;\r\n}\r\n\r\n\/* Toast del Paso 1 \u2014 pop-up desde arriba *\/\r\n.vl-mk-fp-toast {\r\n  position: absolute;\r\n  top: -10px;\r\n  left: 50%;\r\n  transform: translate(-50%, -100%);\r\n  background: #FFFFFF;\r\n  border: 1px solid #E0E0E0;\r\n  border-left: 4px solid #E7FE15;\r\n  border-radius: 10px;\r\n  padding: 10px 16px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  white-space: nowrap;\r\n  z-index: 10;\r\n}\r\n.vl-mk-fp-toast.is-showing {\r\n  animation: vl-fp-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\r\n}\r\n.vl-mk-fp-toast.is-hiding {\r\n  animation: vl-fp-toast-out 0.4s ease-in forwards;\r\n}\r\n@keyframes vl-fp-toast-in {\r\n  from { opacity: 0; transform: translate(-50%, -100%); }\r\n  to   { opacity: 1; transform: translate(-50%, 0); }\r\n}\r\n@keyframes vl-fp-toast-out {\r\n  from { opacity: 1; transform: translate(-50%, 0); }\r\n  to   { opacity: 0; transform: translate(-50%, -100%); }\r\n}\r\n\r\n\/* Animaciones \u2014 se disparan al entrar en viewport (.is-visible) *\/\r\n.vl-mk-filepicker.is-visible .vl-mk-fp-file {\r\n  opacity: 0;\r\n  animation: vl-fp-file-in 0.4s ease-out forwards;\r\n}\r\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(1) { animation-delay: 0.2s; }\r\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(2) { animation-delay: 0.35s; }\r\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(3) { animation-delay: 0.50s; }\r\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(4) { animation-delay: 0.65s; }\r\n@keyframes vl-fp-file-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* La selecci\u00f3n de archivo y la activaci\u00f3n del bot\u00f3n ahora son manuales\r\n   (gestionadas por JS al hacer click). No hay animaciones autom\u00e1ticas. *\/\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MOCKUP PASO 2 \u2014 Chat con el agente\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-mk-chat {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 18px;\r\n  max-width: 560px;\r\n  margin: 0 auto;\r\n}\r\n.vl-mk-chat-row {\r\n  display: flex;\r\n  gap: 12px;\r\n  align-items: flex-start;\r\n  opacity: 0;\r\n}\r\n.vl-mk-chat-row--user { justify-content: flex-end; }\r\n.vl-mk-chat-row--ai   { justify-content: flex-start; }\r\n\r\n.vl-mk-chat-avatar {\r\n  flex-shrink: 0;\r\n  width: 34px;\r\n  height: 34px;\r\n  border-radius: 50%;\r\n  background: #161616;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-top: 2px;\r\n}\r\n.vl-mk-chat-avatar svg {\r\n  display: block;\r\n  transform: translateY(1.5px);\r\n}\r\n.vl-mk-chat-bubble {\r\n  background: #FFFFFF;\r\n  border: 1px solid #E8E8E8;\r\n  border-radius: 14px;\r\n  padding: 16px 18px;\r\n  font-size: 14px;\r\n  line-height: 1.6;\r\n  color: #2A2A2A;\r\n  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06);\r\n  max-width: 88%;\r\n}\r\n.vl-mk-chat-bubble--user {\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  border-color: #161616;\r\n  border-bottom-right-radius: 4px;\r\n}\r\n.vl-mk-chat-bubble--ai {\r\n  border-bottom-left-radius: 4px;\r\n}\r\n\r\n.vl-mk-chat-pdf-tag {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  background: rgba(255,255,255,0.08);\r\n  padding: 6px 10px;\r\n  border-radius: 8px;\r\n  font-size: 12.5px;\r\n  font-weight: 600;\r\n  color: #FFFFFF;\r\n}\r\n\r\n.vl-mk-chat-intro,\r\n.vl-mk-chat-question {\r\n  margin: 0 0 10px;\r\n  font-weight: 600;\r\n  color: #161616;\r\n}\r\n.vl-mk-chat-question { margin-top: 14px; margin-bottom: 12px; }\r\n.vl-mk-chat-sections {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 9px;\r\n}\r\n.vl-mk-chat-sections li {\r\n  position: relative;\r\n  padding-left: 18px;\r\n  font-size: 13.5px;\r\n  font-weight: 600;\r\n  color: #161616;\r\n  opacity: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n  overflow: hidden;\r\n}\r\n.vl-mk-chat-sections li::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top: 9px;\r\n  width: 7px;\r\n  height: 7px;\r\n  border-radius: 50%;\r\n  background: #E7FE15;\r\n}\r\n.vl-mk-chat-section-name {\r\n  flex: 1;\r\n}\r\n\r\n\/* Bot\u00f3n \u2715 para eliminar secci\u00f3n \u2014 oculto por defecto, visible en modo edici\u00f3n *\/\r\n.vl-mk-chat-li-delete {\r\n  display: none;\r\n  width: 22px;\r\n  height: 22px;\r\n  border-radius: 50%;\r\n  border: none;\r\n  background: rgba(0,0,0,0.06);\r\n  color: #161616;\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  font-family: inherit;\r\n  cursor: pointer;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 1;\r\n  padding: 0;\r\n  transition: background 0.2s, color 0.2s, transform 0.2s;\r\n}\r\n.vl-mk-chat.is-editing .vl-mk-chat-li-delete {\r\n  display: inline-flex;\r\n  animation: vl-chat-x-in 0.3s ease-out forwards;\r\n}\r\n.vl-mk-chat-li-delete:hover {\r\n  background: #FCEAEA;\r\n  color: #DC2626;\r\n}\r\n@keyframes vl-chat-x-in {\r\n  from { opacity: 0; transform: scale(0.5); }\r\n  to   { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n\/* Animaci\u00f3n al borrar una secci\u00f3n *\/\r\n.vl-mk-chat-sections li.is-removing {\r\n  animation: vl-chat-li-remove 0.32s ease-in forwards;\r\n}\r\n@keyframes vl-chat-li-remove {\r\n  to {\r\n    opacity: 0;\r\n    max-height: 0;\r\n    margin: 0;\r\n    padding-top: 0;\r\n    padding-bottom: 0;\r\n    transform: translateX(20px);\r\n  }\r\n}\r\n\r\n.vl-mk-chat-buttons {\r\n  display: flex;\r\n  gap: 8px;\r\n  margin-top: 4px;\r\n  flex-wrap: wrap;\r\n}\r\n.vl-mk-chat-btn {\r\n  background: #F2F2F2;\r\n  color: #424242;\r\n  border: 1px solid #E5E5E5;\r\n  border-radius: 100px;\r\n  padding: 7px 14px;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  font-family: inherit;\r\n  cursor: pointer;\r\n  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;\r\n}\r\n.vl-mk-chat-btn:hover {\r\n  background: #E5E5E5;\r\n  border-color: #161616;\r\n  color: #161616;\r\n}\r\n.vl-mk-chat-btn--primary {\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  border-color: #161616;\r\n}\r\n.vl-mk-chat-btn--primary:hover {\r\n  background: #2C2C2C;\r\n  border-color: #2C2C2C;\r\n  color: #FFFFFF;\r\n}\r\n.vl-mk-chat-btn[disabled],\r\n.vl-mk-chat-btn:disabled {\r\n  cursor: default;\r\n}\r\n\r\n\/* Mensaje final \"\u2713 Borrador de plantilla generado\" *\/\r\n.vl-mk-chat-done {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: #161616;\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n}\r\n.vl-mk-chat-done svg { flex-shrink: 0; }\r\n\r\n\/* Animaciones \u2014 disparadas con .is-visible *\/\r\n.vl-mk-chat.is-visible .vl-mk-chat-row--user {\r\n  animation: vl-chat-in-right 0.45s ease-out 0.15s forwards;\r\n}\r\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\r\n  animation: vl-chat-in-left 0.45s ease-out 0.85s forwards;\r\n}\r\n.vl-mk-chat.is-visible .vl-mk-chat-response {\r\n  animation: vl-chat-in-left 0.45s ease-out 2.6s forwards;\r\n}\r\n\/* La burbuja de \"pensando\" se desvanece justo antes de aparecer la respuesta *\/\r\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\r\n  animation: vl-chat-in-left 0.45s ease-out 0.85s forwards,\r\n             vl-chat-fade-out 0.4s ease-in 2.3s forwards;\r\n}\r\n@keyframes vl-chat-in-right {\r\n  from { opacity: 0; transform: translateX(20px); }\r\n  to   { opacity: 1; transform: translateX(0); }\r\n}\r\n@keyframes vl-chat-in-left {\r\n  from { opacity: 0; transform: translateX(-20px); }\r\n  to   { opacity: 1; transform: translateX(0); }\r\n}\r\n@keyframes vl-chat-fade-out {\r\n  to { opacity: 0; height: 0; margin: 0; padding: 0; transform: scaleY(0); transform-origin: top; }\r\n}\r\n\r\n\/* Lista de secciones \u2014 typewriter staggered *\/\r\n.vl-mk-chat.is-visible .vl-mk-chat-sections li {\r\n  animation: vl-chat-li-in 0.4s ease-out forwards;\r\n}\r\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(1) { animation-delay: 3.2s; }\r\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(2) { animation-delay: 3.6s; }\r\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(3) { animation-delay: 4.0s; }\r\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(4) { animation-delay: 4.4s; }\r\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(5) { animation-delay: 4.8s; }\r\n@keyframes vl-chat-li-in {\r\n  from { opacity: 0; transform: translateX(-6px); }\r\n  to   { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n\/* La pregunta y los botones aparecen al final *\/\r\n.vl-mk-chat-question {\r\n  opacity: 0;\r\n}\r\n.vl-mk-chat-buttons {\r\n  opacity: 0;\r\n}\r\n.vl-mk-chat.is-visible .vl-mk-chat-question {\r\n  animation: vl-chat-fade-up 0.4s ease-out 5.3s forwards;\r\n}\r\n.vl-mk-chat.is-visible .vl-mk-chat-buttons {\r\n  animation: vl-chat-fade-up 0.4s ease-out 5.6s forwards;\r\n}\r\n@keyframes vl-chat-fade-up {\r\n  from { opacity: 0; transform: translateY(4px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* La intro \"He detectado...\" aparece justo cuando la respuesta entra *\/\r\n.vl-mk-chat-intro {\r\n  opacity: 0;\r\n}\r\n.vl-mk-chat.is-visible .vl-mk-chat-intro {\r\n  animation: vl-chat-fade-up 0.4s ease-out 2.9s forwards;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MOCKUP PASO 3 \u2014 Editor de plantilla\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-mk-editor {\r\n  position: relative;\r\n  background: #FFFFFF;\r\n  border-radius: 14px;\r\n  border: 1px solid #E8E8E8;\r\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\r\n  max-width: 540px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* Cabecera del editor *\/\r\n.vl-mk-editor-head {\r\n  padding: 12px 18px;\r\n  border-bottom: 1px solid #EEEEEE;\r\n  background: #FAFAFA;\r\n  border-radius: 14px 14px 0 0;\r\n}\r\n.vl-mk-editor-title {\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n}\r\n\r\n\/* Cuerpo con secciones *\/\r\n.vl-mk-editor-body {\r\n  padding: 14px 14px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n}\r\n\r\n\/* Secci\u00f3n (estado base = colapsada) *\/\r\n.vl-mk-editor-section {\r\n  background: #F7F7F7;\r\n  border: 1px solid transparent;\r\n  border-radius: 10px;\r\n  opacity: 0;\r\n  transform: translateX(-6px);\r\n  overflow: hidden;\r\n  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\r\n}\r\n.vl-mk-editor-section-head {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 11px 14px;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: background 0.2s ease;\r\n}\r\n.vl-mk-editor-section-head:hover {\r\n  background: rgba(0,0,0,0.03);\r\n}\r\n.vl-mk-editor-drag {\r\n  color: #B0B0B0;\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  letter-spacing: -2px;\r\n  line-height: 1;\r\n  user-select: none;\r\n  cursor: grab;\r\n  padding: 0 4px;\r\n  touch-action: none;\r\n  transition: color 0.2s ease;\r\n}\r\n.vl-mk-editor-drag:hover {\r\n  color: #4B4B4B;\r\n}\r\n.vl-mk-editor-section--dragging .vl-mk-editor-drag,\r\n.vl-mk-editor--is-dragging .vl-mk-editor-drag {\r\n  cursor: grabbing;\r\n}\r\n\r\n\/* Secci\u00f3n durante el arrastre \u2014 flota con sombra y leve transparencia *\/\r\n.vl-mk-editor-section--dragging {\r\n  position: relative;\r\n  z-index: 50;\r\n  box-shadow: 0 14px 32px -4px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1);\r\n  opacity: 0.96;\r\n  cursor: grabbing;\r\n  transition: box-shadow 0.15s ease, opacity 0.15s ease;\r\n}\r\n.vl-mk-editor--is-dragging {\r\n  cursor: grabbing;\r\n}\r\n.vl-mk-editor-name {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: #2A2A2A;\r\n}\r\n.vl-mk-editor-caret {\r\n  margin-left: auto;\r\n  color: #888;\r\n  font-size: 12px;\r\n  transition: transform 0.25s ease;\r\n  transform: rotate(-90deg);\r\n}\r\n\r\n\/* Secci\u00f3n abierta *\/\r\n.vl-mk-editor-section--open {\r\n  background: #FFFFFF;\r\n  border-color: #161616;\r\n  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.15), 0 0 0 1px #161616;\r\n}\r\n.vl-mk-editor-section--open .vl-mk-editor-section-head {\r\n  background: #F2F2F2;\r\n}\r\n.vl-mk-editor-section--open .vl-mk-editor-section-head:hover {\r\n  background: #ECECEC;\r\n}\r\n.vl-mk-editor-section--open .vl-mk-editor-caret {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n\/* Cuerpo de la secci\u00f3n \u2014 controlado por transition *\/\r\n.vl-mk-editor-section-body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 14px;\r\n  max-height: 0;\r\n  opacity: 0;\r\n  padding: 0 14px;\r\n  overflow: hidden;\r\n  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;\r\n}\r\n.vl-mk-editor-section--open .vl-mk-editor-section-body {\r\n  max-height: 400px;\r\n  opacity: 1;\r\n  padding: 14px;\r\n}\r\n\r\n\/* Caja de instrucciones editable *\/\r\n.vl-mk-editor-instructions {\r\n  background: #FAFAFA;\r\n  border: 1px solid #EEEEEE;\r\n  border-radius: 8px;\r\n  padding: 10px 12px;\r\n  font-size: 12.5px;\r\n  line-height: 1.55;\r\n  color: #424242;\r\n  font-style: italic;\r\n}\r\n\r\n\/* Controles Formato \/ Longitud \u2014 fila compacta: etiqueta EN L\u00cdNEA + iconos peque\u00f1os y planos *\/\r\n.vl-mk-editor-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 26px;\r\n  flex-wrap: wrap;\r\n  opacity: 1;\r\n}\r\n.vl-mk-editor-ctrl-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 9px;\r\n}\r\n.vl-mk-editor-ctrl-label {\r\n  font-size: 11.5px;\r\n  color: #9A9A9A;\r\n  font-weight: 600;\r\n  letter-spacing: 0.01em;\r\n}\r\n.vl-mk-editor-btn-group {\r\n  display: flex;\r\n  gap: 2px;\r\n}\r\n.vl-mk-editor-icon-btn {\r\n  width: 28px;\r\n  height: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: transparent;\r\n  border: none;\r\n  border-radius: 6px;\r\n  color: #6B6B6B;\r\n  cursor: pointer;\r\n  transition: background 0.2s ease, color 0.2s ease;\r\n  padding: 0;\r\n  font-family: inherit;\r\n}\r\n.vl-mk-editor-icon-btn svg { width: 16px; height: 16px; }\r\n.vl-mk-editor-icon-btn:hover {\r\n  background: #F0F0F0;\r\n}\r\n.vl-mk-editor-icon-btn.is-active {\r\n  background: #ECECEC;\r\n  color: #161616;\r\n}\r\n.vl-mk-editor-icon-btn.is-active:hover {\r\n  background: #E2E2E2;\r\n}\r\n.vl-mk-editor-hash {\r\n  font-size: 15px;\r\n  font-weight: 800;\r\n  font-family: inherit;\r\n  line-height: 1;\r\n}\r\n\r\n\/* Footer *\/\r\n.vl-mk-editor-footer {\r\n  display: flex;\r\n  gap: 8px;\r\n  padding: 14px 18px;\r\n  background: #FFFFFF;\r\n  justify-content: flex-end;\r\n  border-radius: 0 0 14px 14px;\r\n}\r\n.vl-mk-editor-action {\r\n  background: #FFFFFF;\r\n  color: #424242;\r\n  border: 1px solid #DDDDDD;\r\n  border-radius: 8px;\r\n  padding: 8px 14px;\r\n  font-size: 12.5px;\r\n  font-weight: 700;\r\n  font-family: inherit;\r\n  cursor: pointer;\r\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\r\n}\r\n.vl-mk-editor-action:hover {\r\n  background: #F5F5F5;\r\n  border-color: #161616;\r\n  color: #161616;\r\n}\r\n.vl-mk-editor-action--primary {\r\n  background: #161616;\r\n  color: #FFFFFF;\r\n  border-color: #161616;\r\n}\r\n.vl-mk-editor-action--primary:hover {\r\n  background: #2C2C2C;\r\n  border-color: #2C2C2C;\r\n  color: #FFFFFF;\r\n}\r\n\r\n\/* Toast \u2014 pop-up que entra desde arriba *\/\r\n.vl-mk-editor-toast {\r\n  position: absolute;\r\n  top: -10px;\r\n  left: 50%;\r\n  transform: translate(-50%, -100%);\r\n  background: #FFFFFF;\r\n  border: 1px solid #E0E0E0;\r\n  border-left: 4px solid #E7FE15;\r\n  border-radius: 10px;\r\n  padding: 10px 16px;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  white-space: nowrap;\r\n  z-index: 10;\r\n}\r\n\r\n\/* \u2550\u2550\u2550 ANIMACIONES INICIALES (entrada) \u2014 disparadas con .is-visible \u2550\u2550\u2550 *\/\r\n\r\n\/* Las 5 secciones aparecen escalonadas al hacer scroll *\/\r\n.vl-mk-editor.is-visible .vl-mk-editor-section {\r\n  animation: vl-ed-section-in 0.4s ease-out forwards;\r\n}\r\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(1) { animation-delay: 0.20s; }\r\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(2) { animation-delay: 0.35s; }\r\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(3) { animation-delay: 0.50s; }\r\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(4) { animation-delay: 0.65s; }\r\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(5) { animation-delay: 0.80s; }\r\n@keyframes vl-ed-section-in {\r\n  from { opacity: 0; transform: translateX(-6px); }\r\n  to   { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n\/* Bot\u00f3n \"Guardar plantilla\" \u2014 pulso al hacer click (controlado por JS) *\/\r\n\r\n\/* Toast \u2014 visible cuando tiene .is-showing (controlado por JS) *\/\r\n@keyframes vl-ed-toast-in {\r\n  from { opacity: 0; transform: translate(-50%, -100%); }\r\n  to   { opacity: 1; transform: translate(-50%, 0); }\r\n}\r\n@keyframes vl-ed-toast-out {\r\n  from { opacity: 1; transform: translate(-50%, 0); }\r\n  to   { opacity: 0; transform: translate(-50%, -100%); }\r\n}\r\n.vl-mk-editor-toast.is-showing {\r\n  animation: vl-ed-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\r\n}\r\n.vl-mk-editor-toast.is-hiding {\r\n  animation: vl-ed-toast-out 0.4s ease-in forwards;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PAIN CARDS \u2014 Colores e iconos animados en hover\r\n   Estado base = blanco\/negro. Solo se activa al pasar el rat\u00f3n.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-card--pain {\r\n  transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n.vl-card--pain .vl-icon {\r\n  transition: background-color 0.4s ease;\r\n}\r\n\r\n\/* Hourglass \u2014 amarillo p\u00e1lido + flip 180\u00b0 *\/\r\n.vl-card--pain-1 .vl-pain-icon-svg {\r\n  transform-origin: center;\r\n  transform-box: fill-box;\r\n  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);\r\n}\r\n.vl-card--pain-1:hover {\r\n  background-color: #FFF9DB;\r\n}\r\n.vl-card--pain-1:hover .vl-icon {\r\n  background-color: #FCE899;\r\n}\r\n.vl-card--pain-1:hover .vl-pain-icon-svg {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n\/* X mark \u2014 rojo p\u00e1lido + vaiv\u00e9n *\/\r\n.vl-card--pain-2 .vl-pain-icon-svg {\r\n  transform-origin: center;\r\n  transform-box: fill-box;\r\n}\r\n.vl-card--pain-2:hover {\r\n  background-color: #FCEAEA;\r\n}\r\n.vl-card--pain-2:hover .vl-icon {\r\n  background-color: #F5BABA;\r\n}\r\n.vl-card--pain-2:hover .vl-pain-icon-svg {\r\n  animation: vl-pain-wobble 0.55s ease-in-out;\r\n}\r\n@keyframes vl-pain-wobble {\r\n  0%, 100% { transform: rotate(0deg); }\r\n  20%      { transform: rotate(-14deg); }\r\n  50%      { transform: rotate(12deg); }\r\n  75%      { transform: rotate(-6deg); }\r\n}\r\n\r\n\/* Gear \u2014 azul p\u00e1lido + giro continuo (al mismo ritmo que el del hero) *\/\r\n.vl-card--pain-3 .vl-pain-icon-img {\r\n  transform-origin: center;\r\n  animation: vl-pain-spin 7s linear infinite;\r\n  animation-play-state: paused;\r\n}\r\n.vl-card--pain-3:hover {\r\n  background-color: #EEF5FE;\r\n}\r\n.vl-card--pain-3:hover .vl-icon {\r\n  background-color: #C9DEFC;\r\n}\r\n.vl-card--pain-3:hover .vl-pain-icon-img {\r\n  animation-play-state: running;\r\n}\r\n@keyframes vl-pain-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PAIN CARDS \u2014 PACK DE EFECTOS\r\n   (spotlight que sigue al cursor + tilt 3D + borde animado +\r\n    contadores de \"coste\" + iconos vivos en bucle)\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@property --vl-bang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }\r\n\r\n\/* 1) Spotlight que sigue al cursor sobre la secci\u00f3n *\/\r\n.vl-pain-section { position: relative; }\r\n.vl-pain-section::before {\r\n  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -20%), rgba(22,22,22,0.07), transparent 60%);\r\n  opacity: 0; transition: opacity 0.45s ease;\r\n}\r\n.vl-pain-section.is-spot::before { opacity: 1; }\r\n.vl-pain-section > .vl-container { position: relative; z-index: 1; }\r\n\r\n\/* 2) Tilt 3D de la tarjeta bajo el cursor *\/\r\n.vl-grid-3:has(.vl-card--pain) { perspective: 1100px; }\r\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; }\r\n\/* Zoom al pasar el rat\u00f3n sobre cada columna del pain (ampl\u00eda todo su contenido) *\/\r\n.vl-pain-card:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 22px 48px -20px rgba(0,0,0,0.22); }\r\n.vl-pain-inner { position: relative; z-index: 1; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); will-change: transform; }\r\n\r\n\/* 3) Borde animado que recorre el contorno (visible siempre; intenso al hover) *\/\r\n.vl-pain-card::after {\r\n  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;\r\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);\r\n  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n  -webkit-mask-composite: xor; mask-composite: exclude;\r\n  animation: vl-border-rot 6s linear infinite;\r\n  opacity: 0.7; transition: opacity 0.35s ease; pointer-events: none; z-index: 2;\r\n}\r\n.vl-pain-card:hover::after { opacity: 1; }\r\n@keyframes vl-border-rot { to { --vl-bang: 360deg; } }\r\n\/* Color del borde animado = tonalidad de cada tarjeta al hacer hover *\/\r\n.vl-card--pain-1 { --vl-bcol: #E6C24A; }   \/* amarillo (como su hover) *\/\r\n.vl-card--pain-2 { --vl-bcol: #E89B9B; }   \/* rojo\/rosa *\/\r\n.vl-card--pain-3 { --vl-bcol: #8FB6F0; }   \/* azul *\/\r\n\r\n\/* CONTADOR 100% CSS (sin JS): cuenta al pasar el rat\u00f3n por la tarjeta. Misma t\u00e9cnica @property que el borde. *\/\r\n@property --vl-hw { syntax: '<integer>'; initial-value: 0; inherits: false; }\r\n@property --vl-hd { syntax: '<integer>'; initial-value: 0; inherits: false; }\r\n@property --vl-c  { syntax: '<integer>'; initial-value: 0; inherits: false; }\r\n@property --vl-t  { syntax: '<integer>'; initial-value: 0; inherits: false; }\r\n\/* La animaci\u00f3n se define en la base PAUSADA (fill forwards) y solo se REPRODUCE al hacer hover.\r\n   Al quitar el rat\u00f3n vuelve a pausa, pero como ya lleg\u00f3 al 100%, se queda en el valor final. *\/\r\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; }\r\n.vl-cntr-hours .vl-cntr-n::after { content: counter(hw) \",\" counter(hd); }\r\n.vl-cntr-corr  .vl-cntr-n { counter-reset: c var(--vl-c); animation: vl-cnt-corr 1s linear forwards paused; }\r\n.vl-cntr-corr  .vl-cntr-n::after { content: counter(c); }\r\n.vl-cntr-tpl   .vl-cntr-n { counter-reset: t var(--vl-t); animation: vl-cnt-tpl 0.7s linear forwards paused; }\r\n.vl-cntr-tpl   .vl-cntr-n::after { content: counter(t); }\r\n.vl-pain-card:hover .vl-cntr-n { animation-play-state: running; }\r\n@keyframes vl-cnt-hours {\r\n  0%     { --vl-hw: 0; --vl-hd: 0; }\r\n  38.46% { --vl-hw: 0; --vl-hd: 9; }\r\n  38.47% { --vl-hw: 1; --vl-hd: 0; }\r\n  76.92% { --vl-hw: 1; --vl-hd: 9; }\r\n  76.93% { --vl-hw: 2; --vl-hd: 0; }\r\n  100%   { --vl-hw: 2; --vl-hd: 5; }\r\n}\r\n@keyframes vl-cnt-corr { from { --vl-c: 0; } to { --vl-c: 14; } }\r\n@keyframes vl-cnt-tpl  { from { --vl-t: 0; } to { --vl-t: 4; } }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .vl-cntr-hours .vl-cntr-n { --vl-hw: 2; --vl-hd: 5; }\r\n  .vl-cntr-corr  .vl-cntr-n { --vl-c: 14; }\r\n  .vl-cntr-tpl   .vl-cntr-n { --vl-t: 4; }\r\n  .vl-cntr-n { animation: none !important; }\r\n}\r\n\/* M\u00f3vil\/t\u00e1ctil: sin hover no hay quien dispare el contador \u2192 mostrar el n\u00famero definitivo directamente *\/\r\n@media (hover: none), (max-width: 1024px) {\r\n  .vl-cntr-hours .vl-cntr-n { --vl-hw: 2; --vl-hd: 5; }\r\n  .vl-cntr-corr  .vl-cntr-n { --vl-c: 14; }\r\n  .vl-cntr-tpl   .vl-cntr-n { --vl-t: 4; }\r\n  .vl-cntr-n { animation: none !important; }\r\n  .vl-pain-stat::before { animation: none !important; }\r\n}\r\n\r\n\/* 4) Contador de \"coste\" \u2014 p\u00edldora con punto \"en vivo\" *\/\r\n.vl-pain-stat {\r\n  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;\r\n  font-size: 13.5px; font-weight: 800; color: #161616;\r\n  background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 100px;\r\n  padding: 7px 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.2px;\r\n  box-shadow: 0 3px 12px -5px rgba(0,0,0,0.14);\r\n}\r\n.vl-pain-stat::before {\r\n  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #161616;\r\n  flex-shrink: 0;\r\n  \/* PAUSADO por defecto (s\u00f3lido, sin parpadeo). Solo parpadea al hacer hover,\r\n     un n\u00ba finito de veces que coincide con la duraci\u00f3n del contador \u2192 al terminar, se queda quieto. *\/\r\n  animation: vl-stat-pulse 0.45s ease-in-out 3 paused;\r\n}\r\n.vl-cntr-corr::before { animation-duration: 0.5s;  animation-iteration-count: 2; }  \/* ~1s, como su contador *\/\r\n.vl-cntr-tpl::before  { animation-duration: 0.35s; animation-iteration-count: 2; }  \/* ~0.7s *\/\r\n.vl-pain-card:hover .vl-pain-stat::before { animation-play-state: running; }\r\n@keyframes vl-stat-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }\r\n\r\n\/* Entrada al hacer scroll: v\u00eda vl-reveal (IntersectionObserver) en cada tarjeta \u2014 fiable y escalonada. *\/\r\n.vl-pain-card h3 { margin-bottom: 6px; }\r\n.vl-pain-card .text-small { line-height: 1.55; }\r\n.vl-pain-stat { margin-top: 16px; padding: 6px 13px; }\r\n\r\n\/* \u2550\u2550\u2550 FORMATO EDITORIAL (sin caja): 3 columnas con divisores, sobrio pero con color SUTIL \u2550\u2550\u2550 *\/\r\n.vl-pain-section::before { display: none !important; }                 \/* (el spotlight se gestiona aparte) *\/\r\n.vl-pain-section { padding-top: 104px; padding-bottom: 150px; }        \/* m\u00e1s aire arriba y, sobre todo, abajo *\/\r\n\/* Mayor separaci\u00f3n entre el encabezado y las tres columnas *\/\r\n.vl-pain-section > .vl-container > .vl-text-center { margin-bottom: 104px !important; }\r\n.vl-grid-3:has(.vl-card--pain) { gap: 0; }\r\n.vl-pain-card {\r\n  background: transparent !important; border: none !important;\r\n  box-shadow: none !important; border-radius: 0 !important;\r\n  padding: 52px 46px !important;                                       \/* mucha m\u00e1s respiraci\u00f3n vertical (arriba y abajo) *\/\r\n}\r\n.vl-pain-card:hover { box-shadow: none !important; }\r\n.vl-pain-card::after { display: none !important; }                      \/* fuera el borde animado de color *\/\r\n.vl-pain-inner { transform: none !important; }                         \/* fuera el tilt 3D *\/\r\n.vl-pain-card + .vl-pain-card { border-left: 1px solid #E6E6E6; }      \/* divisores verticales finos *\/\r\n\/* Icono con color MUY sutil y constante por columna (diferenciaci\u00f3n discreta) *\/\r\n.vl-pain-card .vl-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; }\r\n.vl-pain-card .vl-icon svg { width: 28px; height: 28px; }\r\n.vl-pain-card .vl-icon img { width: 28px; height: 28px; }\r\n.vl-card--pain-1 .vl-icon { background: #F7F1DF !important; }           \/* amarillo muy p\u00e1lido *\/\r\n.vl-card--pain-2 .vl-icon { background: #F6E9EA !important; }           \/* rojo muy p\u00e1lido *\/\r\n.vl-card--pain-3 .vl-icon { background: #E9EFF7 !important; }           \/* azul muy p\u00e1lido *\/\r\n\/* Hover: tarjeta de CRISTAL (frosted glass) \u2014 deja ver los puntitos del fondo desenfocados, texto m\u00e1s legible *\/\r\n.vl-card--pain-1:hover, .vl-card--pain-2:hover, .vl-card--pain-3:hover {\r\n  background: rgba(255,255,255,0.5) !important;\r\n  -webkit-backdrop-filter: blur(12px) saturate(1.2);\r\n          backdrop-filter: blur(12px) saturate(1.2);\r\n  border-radius: 22px !important;\r\n  border: 1px solid rgba(255,255,255,0.7) !important;\r\n  box-shadow: 0 24px 54px -24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.8) !important;\r\n}\r\n@media (max-width: 900px) {\r\n  .vl-pain-section { padding-top: 64px; padding-bottom: 64px; }\r\n  .vl-pain-card { padding: 26px 0 !important; }\r\n  .vl-pain-card + .vl-pain-card { border-left: none; border-top: 1px solid #E6E6E6; }\r\n}\r\n\r\n\/* 5) Iconos: reloj de arena y \"X\" se animan SOLO al hover (comportamiento original). El engranaje gira en bucle. *\/\r\n.vl-card--pain-3 .vl-pain-icon-img { animation: vl-pain-spin 9s linear infinite !important; animation-play-state: running !important; }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .vl-pain-card::after,\r\n  .vl-card--pain-1 .vl-pain-icon-svg,\r\n  .vl-card--pain-2 .vl-pain-icon-svg,\r\n  .vl-card--pain-3 .vl-pain-icon-img { animation: none; }\r\n  .vl-pain-section::before { display: none; }\r\n}\r\n@media (max-width: 900px) {\r\n  .vl-pain-section::before { display: none; }   \/* sin spotlight en m\u00f3vil *\/\r\n  .vl-pain-inner { transform: none !important; } \/* sin tilt en m\u00f3vil *\/\r\n}\r\n\r\n\/* \u2550\u2550\u2550 SIN EFECTOS DE HOVER EN MOVIL NI EN TACTIL \u2550\u2550\u2550\r\n   En pantalla estrecha o en dispositivos sin raton, las tarjetas de dolor no\r\n   reaccionan: ni escalado, ni sombra, ni movimiento del icono. En tactil el\r\n   :hover se queda \"pegado\" tras tocar, asi que ademas de innecesario, molesta. *\/\r\n@media (max-width: 900px), (hover: none) {\r\n  .vl-pain-card,\r\n  .vl-pain-card:hover {\r\n    transform: none !important;\r\n    box-shadow: none !important;\r\n    z-index: auto !important;\r\n  }\r\n  .vl-pain-card::after,\r\n  .vl-pain-card:hover::after { opacity: 0 !important; display: none !important; }\r\n  .vl-card--pain-1:hover .vl-pain-icon-svg,\r\n  .vl-card--pain-2:hover .vl-pain-icon-svg,\r\n  .vl-card--pain-3:hover .vl-pain-icon-svg,\r\n  .vl-card--pain-1:hover .vl-pain-icon-img,\r\n  .vl-card--pain-2:hover .vl-pain-icon-img,\r\n  .vl-card--pain-3:hover .vl-pain-icon-img { transform: none !important; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   COMPARATIVA \"Un cambio que notar\u00e1s\"\r\n   Estilo monocrom\u00e1tico, alineado con el lenguaje de Voicit\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-compare-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto 1fr;\r\n  gap: 28px;\r\n  align-items: stretch;\r\n  max-width: 980px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.vl-compare-card {\r\n  background: #FFFFFF;\r\n  border-radius: 16px;\r\n  padding: 36px 36px 40px;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.vl-compare-card--before {\r\n  border: 1px solid #E5E5E5;\r\n  background: #FAFAFA;\r\n}\r\n.vl-compare-card--after {\r\n  border: 1.5px solid #161616;\r\n  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.08);\r\n}\r\n\r\n\/* Etiqueta \"ANTES\" \/ \"AHORA\" en may\u00fasculas *\/\r\n.vl-compare-label {\r\n  display: inline-block;\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n  letter-spacing: 2.5px;\r\n  text-transform: uppercase;\r\n  color: #9A9A9A;\r\n  margin-bottom: 14px;\r\n}\r\n.vl-compare-card--after .vl-compare-label {\r\n  color: #161616;\r\n}\r\n\r\n\/* T\u00edtulo descriptivo *\/\r\n.vl-compare-title {\r\n  font-size: 18px;\r\n  font-weight: 700;\r\n  color: #161616;\r\n  line-height: 1.35;\r\n  margin: 0 0 22px;\r\n  padding-bottom: 20px;\r\n  border-bottom: 1px solid #ECECEC;\r\n}\r\n.vl-compare-card--after .vl-compare-title {\r\n  border-bottom-color: #E0E0E0;\r\n}\r\n\r\n\/* Lista de items *\/\r\n.vl-compare-list {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 18px;\r\n}\r\n.vl-compare-list li {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 14px;\r\n  font-size: 16px;\r\n  line-height: 1.55;\r\n}\r\n.vl-compare-card--before .vl-compare-list li {\r\n  color: #6E6E6E;\r\n}\r\n.vl-compare-card--after .vl-compare-list li {\r\n  color: #161616;\r\n  font-weight: 500;\r\n}\r\n\r\n\/* Guion (em-dash) en la card \"Antes\" \u2014 gris claro *\/\r\n.vl-compare-dash {\r\n  flex-shrink: 0;\r\n  width: 22px;\r\n  height: 22px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-top: 2px;\r\n}\r\n.vl-compare-dash::before {\r\n  content: '';\r\n  display: block;\r\n  width: 12px;\r\n  height: 2px;\r\n  background: #C5C5C5;\r\n  border-radius: 1px;\r\n}\r\n\r\n\/* Check en la card \"Ahora\" \u2014 c\u00edrculo negro con \u2713 amarillo de marca\r\n   Mismo lenguaje que el check del mockup del Hero *\/\r\n.vl-compare-check {\r\n  flex-shrink: 0;\r\n  width: 22px;\r\n  height: 22px;\r\n  border-radius: 50%;\r\n  background: #161616;\r\n  color: #E7FE15;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n  line-height: 1;\r\n  margin-top: 2px;\r\n}\r\n\r\n\/* Flecha de transformaci\u00f3n entre las dos cards *\/\r\n.vl-compare-arrow {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n\/* Responsive: en pantallas peque\u00f1as, apilamos vertical y rotamos la flecha *\/\r\n@media (max-width: 900px) {\r\n  .vl-compare-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n    max-width: 540px;\r\n  }\r\n  .vl-compare-arrow svg {\r\n    transform: rotate(90deg);\r\n  }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   COMPARATIVA \"Antes \/ Ahora\"\r\n   \u00b7 ESCRITORIO (>1024px): scroll fijado \u2014 la flecha se dibuja y el \"Ahora\" entra al hacer scroll (JS).\r\n   \u00b7 M\u00d3VIL (\u22641024px): SIN scroll fijado \u2014 se desarrolla de forma natural al entrar en pantalla (IO + CSS).\r\n   POR DEFECTO TODO VISIBLE (si el JS no corre, no se oculta nada).\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-cmp-section { position: relative; }\r\n.vl-cmp-track { position: relative; height: 200vh; }\r\n.vl-cmp-sticky {\r\n  position: sticky; top: 0; height: 100vh;\r\n  display: flex; flex-direction: column; justify-content: center;\r\n  box-sizing: border-box; padding: 40px 0;\r\n}\r\n\/* Transiciones BASE (escritorio, dirigidas por scroll: cortas y sin retardo) *\/\r\n.vl-compare-arrow svg path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.12s linear; }\r\n.vl-compare-card--after { transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform; }\r\n.vl-compare-card--after .vl-compare-list li { transition: opacity 0.25s ease, transform 0.25s ease; will-change: opacity, transform; }\r\n\r\n\/* M\u00d3VIL: revelado natural escalonado (lo activa el JS a\u00f1adiendo .vl-cmp-prep y luego .is-live) *\/\r\n.vl-cmp-section.vl-cmp-prep .vl-compare-arrow svg path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease 0.15s; }\r\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; }\r\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; }\r\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(1) { transition-delay: 0.95s; }\r\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(2) { transition-delay: 1.20s; }\r\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(3) { transition-delay: 1.45s; }\r\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-arrow svg path { stroke-dashoffset: 0; }\r\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-card--after { opacity: 1; transform: none; }\r\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-card--after .vl-compare-list li { opacity: 1; transform: none; }\r\n\r\n@media (max-width: 1024px) {\r\n  \/* Quitamos el scroll fijado: la secci\u00f3n fluye con naturalidad *\/\r\n  .vl-cmp-track { height: auto; }\r\n  .vl-cmp-sticky { position: static; height: auto; padding: 16px 0; }\r\n  .vl-sstep .vl-mk-chat { text-align: left; }                                    \/* el chat del paso 2 no va centrado *\/\r\n  .vl-compare-card { padding: 22px 20px 24px; }\r\n  .vl-compare-title { font-size: 16px; padding-bottom: 14px; margin-bottom: 14px; }\r\n  .vl-compare-list { gap: 12px; }\r\n  .vl-compare-list li { font-size: 14.5px; }\r\n}\r\n\r\n.vl-mb-8 { margin-bottom: 8px; }\r\n.vl-mb-12 { margin-bottom: 12px; }\r\n.vl-mb-16 { margin-bottom: 16px; }\r\n.vl-mb-24 { margin-bottom: 24px; }\r\n.vl-mb-32 { margin-bottom: 32px; }\r\n.vl-mb-48 { margin-bottom: 48px; }\r\n.vl-mb-64 { margin-bottom: 64px; }\r\n.vl-mt-32 { margin-top: 32px; }\r\n.vl-mt-48 { margin-top: 48px; }\r\n.vl-mt-64 { margin-top: 64px; }\r\n.vl-gap-16 { gap: 16px; }\r\n.vl-gap-24 { gap: 24px; }\r\n.vl-flex { display: flex; }\r\n.vl-flex-col { flex-direction: column; }\r\n.vl-items-center { align-items: center; }\r\n.vl-justify-center { justify-content: center; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   AUDITOR\u00cdA RESPONSIVE \u2014 tablet vertical y m\u00f3vil\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* \u2500\u2500 TABLET VERTICAL Y M\u00d3VIL (\u2264900px) \u2500\u2500 *\/\r\n@media (max-width: 900px) {\r\n  \/* Hero: reducir padding *\/\r\n  .vl-landing section[style*=\"padding-top:60px\"] {\r\n    padding-top: 48px !important;\r\n    padding-bottom: 56px !important;\r\n  }\r\n\r\n  \/* HERO: REORDENAR a vertical (H1 \u2192 p\u00e1rrafo \u2192 mockup \u2192 CTAs \u2192 badge) *\/\r\n  .vl-hero-flex {\r\n    flex-direction: column !important;\r\n    align-items: center !important;\r\n    text-align: center !important;\r\n    gap: 28px !important;\r\n  }\r\n  \/* Las \"columnas\" inline-styled del hero se aplanan en m\u00f3vil con display:contents,\r\n     as\u00ed sus hijos pasan a ser flex-items directos de vl-hero-flex y podemos\r\n     reordenarlos con `order`. *\/\r\n  .vl-hero-flex > div[style*=\"flex:1.8\"],\r\n  .vl-hero-flex > div[style*=\"flex:1;min-width:0\"] {\r\n    display: contents;\r\n  }\r\n  \/* Orden visual en m\u00f3vil *\/\r\n  .vl-hero-flex h1 { order: 1; margin: 0; }\r\n  .vl-hero-flex p[style*=\"font-size:20px\"] { order: 2; margin: 0; max-width: 560px; }\r\n  .vl-hero-mockup { order: 3; margin: 0 auto; max-width: 460px; width: 100%; }\r\n  .vl-hero-flex .vl-hero-actions { order: 4; margin: 0; justify-content: center; }\r\n  \/* El contenedor del badge Google (el div con margin-top:32px que envuelve el badge) *\/\r\n  .vl-hero-flex > div > div[style*=\"margin-top:32px\"] {\r\n    order: 5;\r\n    margin-top: 0 !important;\r\n    justify-content: center !important;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* Carrusel de logos: tama\u00f1os algo menores *\/\r\n  .vl-logos-track img {\r\n    height: 28px;\r\n    max-width: 130px;\r\n    margin-right: 56px;\r\n  }\r\n  .vl-logos-track img[alt=\"ieTeam\"] {\r\n    height: 50px;\r\n    max-width: 170px;\r\n  }\r\n\r\n  \/* STEP ROWS \u2014 centrados verticalmente, orden: t\u00edtulo+n\u00ba \u2192 p\u00e1rrafo \u2192 mockup *\/\r\n  .vl-step-row {\r\n    flex-direction: column !important;\r\n    text-align: center !important;\r\n    align-items: center !important;\r\n    gap: 28px !important;\r\n  }\r\n  .vl-step-row[style*=\"row-reverse\"] { flex-direction: column !important; }\r\n  .vl-step-row > div { flex: 1 1 100% !important; width: 100%; }\r\n  \/* La cabecera del paso: n\u00famero ARRIBA, t\u00edtulo DEBAJO (apilados, no en l\u00ednea) *\/\r\n  .vl-step-row > div > div[style*=\"align-items:center\"][style*=\"gap:16px\"] {\r\n    flex-direction: column !important;\r\n    justify-content: center !important;\r\n    align-items: center !important;\r\n    gap: 14px !important;\r\n  }\r\n  \/* El mockup del paso va al final, debajo del p\u00e1rrafo *\/\r\n  .vl-step-row > div:has(.vl-mk-rec),\r\n  .vl-step-row > div:has(.vl-vm-card),\r\n  .vl-step-row > div:has(.vl-mk-editor),\r\n  .vl-step-row > div:has(.vl-vbcard) {\r\n    order: 2;\r\n  }\r\n\r\n  \/* Casos de uso: tablet \u2192 grid de 2 columnas (no 1) para aprovechar mejor el ancho *\/\r\n  .vl-grid-3 {\r\n    grid-template-columns: repeat(2, 1fr) !important;\r\n  }\r\n  \/* EXCEPCI\u00d3N: el grid de pain points (3 tarjetas) NO debe ir a 2 columnas en\r\n     tablet \u2014 quedar\u00eda 2+1 con un hueco hu\u00e9rfano. Lo mantenemos en 3 columnas\r\n     horizontales (como en desktop), que caben bien en iPad vertical. *\/\r\n  .vl-grid-3:has(.vl-card--pain) {\r\n    grid-template-columns: repeat(3, 1fr) !important;\r\n  }\r\n\r\n  \/* Comparativa Antes\/Ahora: ya pasa a 1 columna, flecha rotada *\/\r\n  .vl-compare-card { padding: 28px 28px 32px; }\r\n\r\n  \/* IMPORTANTE: Mantenemos el STICKY-STACK de testimonios activo en m\u00f3vil\/tablet\r\n     porque queremos que la animaci\u00f3n funcione en vertical tambi\u00e9n *\/\r\n  \/* (no se desactiva como antes) *\/\r\n  .vl-tstack-cards { max-width: 540px; }\r\n}\r\n\r\n\/* \u2500\u2500 M\u00d3VIL (\u2264600px) \u2500\u2500 *\/\r\n@media (max-width: 600px) {\r\n  \/* Hero: padding a\u00fan menor *\/\r\n  .vl-landing section[style*=\"padding-top:60px\"] {\r\n    padding-top: 36px !important;\r\n    padding-bottom: 48px !important;\r\n  }\r\n\r\n  \/* H1: m\u00e1s grande de lo que estaba (32 \u2192 36) *\/\r\n  .vl-landing h1 {\r\n    font-size: 36px;\r\n  }\r\n  .vl-landing h1 br { display: none; }\r\n\r\n  \/* P\u00e1rrafo del hero: m\u00e1s peque\u00f1o para crear contraste con H1 *\/\r\n  .vl-hero-flex p[style*=\"font-size:20px\"] {\r\n    font-size: 16px !important;\r\n    line-height: 1.55 !important;\r\n  }\r\n\r\n  \/* Botones: NO full-width \u2014 que tengan su tama\u00f1o natural y queden centrados *\/\r\n  .vl-btn {\r\n    width: auto !important;\r\n    padding: 14px 28px !important;\r\n  }\r\n  .vl-hero-actions {\r\n    flex-direction: row !important;\r\n    width: auto !important;\r\n    flex-wrap: wrap;\r\n    gap: 12px !important;\r\n    justify-content: center !important;\r\n  }\r\n\r\n  \/* Badge Google: centrado y con padding reducido *\/\r\n  .vl-google-badge {\r\n    padding: 11px 18px;\r\n    font-size: 13.5px;\r\n  }\r\n\r\n  \/* Casos de uso: en m\u00f3vil s\u00ed 1 columna *\/\r\n  .vl-grid-3 {\r\n    grid-template-columns: 1fr !important;\r\n  }\r\n  \/* Pain points: en m\u00f3vil tambi\u00e9n 1 columna (el :has tiene m\u00e1s especificidad\r\n     que .vl-grid-3, as\u00ed que hay que sobreescribirlo expl\u00edcitamente aqu\u00ed). *\/\r\n  .vl-grid-3:has(.vl-card--pain) {\r\n    grid-template-columns: 1fr !important;\r\n  }\r\n\r\n  \/* Pain points \/ Ventajas grid de 2 \u2192 1 columna ya viene desde 900px *\/\r\n  .vl-grid-2 {\r\n    grid-template-columns: 1fr !important;\r\n  }\r\n\r\n  \/* Container: padding lateral m\u00e1s generoso *\/\r\n  .vl-container, .vl-container--narrow {\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n  }\r\n\r\n  \/* Hero mockup: 100% del ancho disponible *\/\r\n  .vl-hero-mockup { max-width: 100%; }\r\n  .vl-mk-machine { min-width: 200px; padding: 12px 16px; }\r\n  .vl-mk-template-title { font-size: 12px; }\r\n\r\n  \/* Carrusel logos: tama\u00f1os m\u00f3vil *\/\r\n  .vl-logos-track img {\r\n    height: 24px;\r\n    max-width: 110px;\r\n    margin-right: 40px;\r\n  }\r\n  .vl-logos-track img[alt=\"ieTeam\"] {\r\n    height: 42px;\r\n    max-width: 140px;\r\n  }\r\n\r\n  \/* File picker (Paso 1): grid 1 col en m\u00f3vil para que los nombres se lean *\/\r\n  .vl-mk-fp-grid {\r\n    grid-template-columns: 1fr;\r\n    padding: 14px;\r\n  }\r\n  .vl-mk-fp-file { padding: 10px; }\r\n  .vl-mk-fp-name { font-size: 11.5px; }\r\n\r\n  \/* Chat mockup (Paso 2): burbujas m\u00e1s anchas, menos padding *\/\r\n  .vl-mk-chat-bubble {\r\n    padding: 12px 14px;\r\n    font-size: 13px;\r\n    max-width: 92%;\r\n  }\r\n  .vl-mk-chat-sections li { font-size: 12.5px; }\r\n\r\n  \/* Editor (Paso 3): controles apilan verticalmente *\/\r\n  .vl-mk-editor { max-width: 100%; }\r\n  .vl-mk-editor-section-head { padding: 10px 12px; }\r\n  .vl-mk-editor-name { font-size: 12.5px; }\r\n  .vl-mk-editor-controls {\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n  .vl-mk-editor-action { width: auto; }\r\n  .vl-mk-editor-toast { font-size: 12px; padding: 9px 14px; }\r\n\r\n  \/* Comparativa: padding compacto *\/\r\n  .vl-compare-card { padding: 24px 22px 28px; }\r\n  .vl-compare-title { font-size: 16px; padding-bottom: 16px; margin-bottom: 18px; }\r\n  .vl-compare-list li { font-size: 14.5px; }\r\n\r\n  \/* Testimonios: padding compacto en m\u00f3vil\r\n     (el sticky-stack sigue activo, ver el bloque de 900px) *\/\r\n  .vl-testimonial--compact { padding: 24px 22px 22px; }\r\n  .vl-testimonial-text { font-size: 15px; line-height: 1.6; padding-top: 22px; }\r\n  .vl-tstack-track { height: 130vh; }    \/* algo menos que en escritorio para que sea m\u00e1s r\u00e1pido *\/\r\n  .vl-tstack-cards { min-height: 320px; }\r\n\r\n  \/* CTA final: padding y h2 *\/\r\n  .vl-landing section[style*=\"background:#161616\"] { padding: 56px 0 !important; }\r\n\r\n  \/* Iconos pain points: tama\u00f1o cuadrado m\u00e1s peque\u00f1o *\/\r\n  .vl-icon { width: 50px; height: 50px; }\r\n  .vl-icon svg { width: 28px; height: 28px; }\r\n  .vl-icon img { width: 28px; height: 28px; }\r\n\r\n  \/* Avatares de testimonios un pel\u00edn menores *\/\r\n  .vl-testimonial-avatar { width: 48px; height: 48px; }\r\n\r\n  \/* CTA final (p\u00edldora): en m\u00f3vil el H2 (\"Tu primera plantilla, lista en 2 minutos\")\r\n     y el subt\u00edtulo (\"Empieza gratis\u2026 Sin tarjeta de cr\u00e9dito.\") quedaban con palabras\r\n     hu\u00e9rfanas en la \u00faltima l\u00ednea (ej.: \"minutos\" o \"cr\u00e9dito\" solas). Reducimos\r\n     tama\u00f1o y aplicamos text-wrap:balance para conseguir 2 l\u00edneas equilibradas\r\n     en el H2 y 1 l\u00ednea (o 2 balanceadas en pantallas estrechas) en el subt\u00edtulo.\r\n     DESKTOP NO CAMBIA. *\/\r\n  .vl-cta-pill h2 {\r\n    font-size: 22px !important;\r\n    line-height: 1.25 !important;\r\n    text-wrap: pretty;\r\n    text-wrap: balance;\r\n  }\r\n  .vl-cta-pill p {\r\n    font-size: 15px !important;\r\n    line-height: 1.45 !important;\r\n    text-wrap: pretty;\r\n    text-wrap: balance;\r\n  }\r\n}\r\n\r\n\/* \u2500\u2500 M\u00d3VIL ESTRECHO (\u2264375px) \u2500\u2500 *\/\r\n@media (max-width: 375px) {\r\n  .vl-landing h1 { font-size: 32px; }\r\n  .vl-landing h2 { font-size: 24px; }\r\n  .vl-landing h3 { font-size: 19px; }\r\n  .vl-mk-fp-name { font-size: 10.5px; }\r\n  .vl-mk-chat-bubble { font-size: 12.5px; padding: 10px 12px; }\r\n  .vl-btn { padding: 13px 22px !important; font-size: 14px !important; }\r\n\r\n  \/* CTA final en m\u00f3vil estrecho: a\u00fan m\u00e1s compacto *\/\r\n  .vl-cta-pill h2 { font-size: 20px !important; }\r\n  .vl-cta-pill p  { font-size: 14px !important; }\r\n}\r\n@media (max-width: 900px) {\r\n  \/* NORMA BALANCE: ocultar <br> de t\u00edtulos en pantallas estrechas *\/\r\n  .vl-landing h1 br, .vl-landing h2 br, .vl-landing h3 br { display: none !important; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCROLL CONGELADO DE LOS 3 PASOS (sticky-steps)\r\n   La secci\u00f3n se \"pega\" y van pasando los pasos uno a uno.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-ssteps { position: relative; background: #F8F8F8; padding-top: 6vh; }   \/* peque\u00f1o respiro antes del bloque fijo *\/\r\n\/* El t\u00edtulo de los pasos arranca transparente y se revela con un fundido al hacer scroll (JS controla la opacidad) *\/\r\n.vl-ssteps-dtitle, .vl-ssteps-progress { will-change: opacity, transform; }\r\n\/* Esta secci\u00f3n usa un contenedor m\u00e1s ancho para dar aire a las animaciones *\/\r\n.vl-ssteps .vl-container { max-width: 1340px; width: 100%; }\r\n\/* T\u00edtulo m\u00f3vil (en flujo normal) oculto en escritorio *\/\r\n.vl-ssteps-mtitle { display: none; }\r\n\/* Track: da el \"recorrido\" de scroll. ~135vh por paso. *\/\r\n.vl-ssteps-track { position: relative; height: 320vh; z-index: 1; }   \/* por delante de la capa de puntos de la secci\u00f3n *\/\r\n\/* Lo que se queda fijo en pantalla mientras dura el track *\/\r\n.vl-ssteps-sticky {\r\n  position: sticky;\r\n  top: 112px;                      \/* despeja el header fijo del sitio (~75px) + algo de aire extra *\/\r\n  height: calc(100vh - 112px);\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;   \/* cabecera arriba, no centrada *\/\r\n  background: #F8F8F8;\r\n  box-sizing: border-box;\r\n  padding: 28px 0 32px;\r\n}\r\n\/* Indicador de progreso (3 barritas) *\/\r\n.vl-ssteps-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 56px; }\r\n.vl-ssteps-progress span {\r\n  width: 32px; height: 4px; border-radius: 2px;\r\n  background: #DADADA;\r\n  transition: background 0.35s ease, width 0.35s ease;\r\n  position: relative; cursor: pointer;   \/* clicables: llevan a su paso *\/\r\n}\r\n\/* Relleno NEGRO que crece de izquierda a derecha seg\u00fan el scroll \u2192 feedback continuo de que el scroll avanza *\/\r\n.vl-ssteps-progress span::after {\r\n  content: ''; position: absolute; left: 0; top: 0; bottom: 0;\r\n  width: calc(var(--fill, 0) * 100%);\r\n  background: #161616; border-radius: inherit;\r\n  transition: width 0.12s linear;\r\n}\r\n.vl-ssteps-progress span::before { content: ''; position: absolute; inset: -14px -5px; z-index: 1; }  \/* \u00e1rea de click m\u00e1s amplia *\/\r\n.vl-ssteps-progress span:hover { background: #C8C8C8; }\r\n.vl-ssteps-progress span.is-active { width: 44px; }   \/* el paso actual es m\u00e1s ancho; el color lo aporta el relleno *\/\r\n\/* Escenario donde se apilan los 3 paneles *\/\r\n.vl-ssteps-stage { position: relative; min-height: 500px; }\r\n\/* Cada paso ocupa todo el escenario; solo el activo se ve *\/\r\n.vl-sstep {\r\n  position: absolute; inset: 0;\r\n  display: flex !important;\r\n  flex-direction: row !important;  \/* SIEMPRE texto izquierda, animaci\u00f3n derecha *\/\r\n  align-items: center;\r\n  gap: 64px;\r\n  opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);\r\n  pointer-events: none;\r\n}\r\n.vl-sstep.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }\r\n.vl-sstep > div { min-width: 0; }\r\n\/* Texto algo m\u00e1s estrecho, animaci\u00f3n m\u00e1s ancha para no crecer en vertical *\/\r\n.vl-sstep > div:first-child { flex: 0 1 46% !important; }\r\n.vl-sstep > div:last-child  { flex: 1 1 54% !important; }\r\n\/* Texto siempre alineado a la izquierda *\/\r\n.vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: left; }\r\n\r\n@media (max-width: 1024px) {\r\n  \/* M\u00d3VIL\/TABLET: SIN scroll fijado. Los 3 pasos se apilan en flujo normal, uno tras otro. *\/\r\n  .vl-ssteps { padding-top: 0; }\r\n  .vl-ssteps .vl-container { padding-left: 24px; padding-right: 24px; }\r\n  .vl-ssteps-mtitle { display: block; text-align: center; padding: 40px 24px 8px; }\r\n  .vl-ssteps-dtitle { display: none; }\r\n  .vl-ssteps-progress { display: none; }\r\n  \/* Quitamos el sticky: track y sticky en flujo normal *\/\r\n  .vl-ssteps-track { height: auto; }\r\n  .vl-ssteps-sticky { position: static; height: auto; padding: 8px 0 0; background: transparent; }\r\n  .vl-ssteps-stage { min-height: 0; }\r\n  \/* Cada paso deja de estar superpuesto (absolute) y pasa a apilarse, siempre visible *\/\r\n  .vl-sstep {\r\n    position: static; inset: auto;\r\n    opacity: 1 !important; transform: none !important; pointer-events: auto;\r\n    flex-direction: column !important;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    gap: 12px;\r\n    text-align: center;\r\n    margin: 0 0 56px;\r\n  }\r\n  .vl-sstep:last-child { margin-bottom: 0; }\r\n  .vl-sstep > div:first-child, .vl-sstep > div:last-child { flex: 0 0 auto !important; width: 100%; }\r\n  .vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: center; }\r\n  .vl-sstep .vl-mb-16 { justify-content: center; margin-bottom: 6px !important; }\r\n  .vl-sstep p { font-size: 14.5px; line-height: 1.45; margin-bottom: 2px !important; }\r\n  .vl-sstep .vl-info-tooltip { display: none; }\r\n  .vl-ssteps .vl-mk-rec, .vl-ssteps .vl-vm-card, .vl-ssteps .vl-mk-editor, .vl-ssteps .vl-vbcard { max-width: 420px; margin: 0 auto; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CASOS DE USO \u2014 CONSTELACI\u00d3N INTERACTIVA\r\n   Nodos redondos unidos por l\u00edneas que se \"dibujan\" al hacer scroll.\r\n   Hover: resalta el nodo y muestra su descripci\u00f3n.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.vl-constellation { position: relative; max-width: 1040px; margin: 0 auto; min-height: 600px; }\r\n\/* \u2500\u2500 CAPA DE PUNTOS REUTILIZABLE (Hero, pain y casos de uso) \u2500\u2500\r\n   Base muy tenue a lo ancho de toda la secci\u00f3n; al mover el rat\u00f3n se iluminan en un radio amplio alrededor del cursor. *\/\r\n.vl-dots { position: relative; }\r\n.vl-dots > .vl-container { position: relative; z-index: 1; }\r\n\/* Cualquier hijo directo (track, container--narrow, mtitle\u2026) por ENCIMA de la capa de puntos *\/\r\n.vl-dots > *:not(.vl-dots-layer) { position: relative; z-index: 1; }\r\n.vl-dots-layer {\r\n  position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n  background-image: radial-gradient(#CFCFCF 1.4px, transparent 1.6px);\r\n  background-size: 24px 24px;\r\n  opacity: 0.14;                          \/* base muy tenue en todo el ancho *\/\r\n  transition: opacity 0.4s ease;\r\n}\r\n.vl-dots.is-lit .vl-dots-layer {\r\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%);\r\n          mask: radial-gradient(circle 360px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,0.5) 48%, transparent 80%);\r\n  opacity: 0.95;\r\n}\r\n.vl-cst-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }\r\n.vl-cst-line { stroke: #D7D7D7; stroke-width: 1.5; fill: none; opacity: 0; transition: opacity 0.6s ease; }\r\n.vl-constellation.is-drawn .vl-cst-line { opacity: 1; }\r\n.vl-cst-node {\r\n  position: absolute; left: var(--x); top: var(--y);\r\n  width: 152px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;\r\n  z-index: 2; opacity: 0; transform: translate(-50%,-50%) scale(0.55);\r\n  transition: opacity 0.6s ease;   \/* el transform lo controla el JS (salida desde el centro + flotaci\u00f3n) *\/\r\n}\r\n.vl-constellation.is-drawn .vl-cst-node { opacity: 1; }\r\n\/* fallback sin JS \/ reduced-motion: posici\u00f3n final *\/\r\n.vl-constellation.is-drawn .vl-cst-node { transform: translate(-50%,-50%) scale(1); }\r\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"0\"] { transition-delay: 0s; }\r\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"1\"] { transition-delay: 0.08s; }\r\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"2\"] { transition-delay: 0.16s; }\r\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"3\"] { transition-delay: 0.24s; }\r\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"4\"] { transition-delay: 0.32s; }\r\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"5\"] { transition-delay: 0.40s; }\r\n.vl-cst-dot {\r\n  position: relative; overflow: hidden;\r\n  width: 86px; height: 86px; border-radius: 50%;\r\n  display: flex; align-items: center; justify-content: center;\r\n  \/* Volumen de esfera: brillo arriba + sombra interior abajo + sombra de apoyo *\/\r\n  box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 10px 24px -10px rgba(0,0,0,0.20);\r\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n}\r\n\/* Reflejo glossy en la esquina superior \u2192 aspecto de burbuja\/esfera *\/\r\n.vl-cst-dot::before {\r\n  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none;\r\n  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.92), rgba(255,255,255,0.25) 40%, rgba(255,255,255,0) 62%);\r\n}\r\n.vl-cst-dot svg { width: 38px; height: 38px; position: relative; z-index: 1; }\r\n.vl-cst-label { font-size: 15px; font-weight: 700; color: #161616; line-height: 1.25; margin: 0; }\r\n.vl-cst-desc {\r\n  position: absolute; top: calc(100% + 10px); left: 50%;\r\n  transform: translateX(-50%) translateY(4px);\r\n  width: 214px; background: #161616; color: #FFFFFF;\r\n  font-size: 12.5px; line-height: 1.45; padding: 10px 13px; border-radius: 10px;\r\n  opacity: 0; pointer-events: none; z-index: 5;\r\n  transition: opacity 0.2s ease, transform 0.2s ease;\r\n}\r\n.vl-cst-node--up .vl-cst-desc { top: auto; bottom: calc(100% + 10px); }\r\n.vl-cst-node:hover { z-index: 6; }\r\n.vl-cst-node:hover .vl-cst-dot { transform: scale(1.12); box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 18px 36px -12px rgba(0,0,0,0.28); }\r\n.vl-cst-node:hover .vl-cst-desc { opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n@media (max-width: 1024px) {\r\n  \/* Sin hover en tablet\/m\u00f3vil: rejilla simple con icono + t\u00edtulo + descripci\u00f3n siempre visible *\/\r\n  .vl-constellation { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }\r\n  .vl-dots-layer { display: none; }\r\n  .vl-cst-svg { display: none; }\r\n  .vl-cst-node { position: static; transform: none !important; opacity: 1 !important; width: auto; transition: none; }\r\n  \/* En vertical mostramos solo icono + t\u00edtulo; ocultamos la descripci\u00f3n *\/\r\n  .vl-cst-desc { display: none !important; }\r\n  .vl-cst-node:hover .vl-cst-dot { transform: none; box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 10px 24px -10px rgba(0,0,0,0.20); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 TIRA DE PROCESO: flechas (chevrons) encadenadas con icono + etiqueta dentro \u2550\u2550\u2550 *\/\r\n.vl-chevflow { display: flex; margin-top: 66px; position: relative; padding-bottom: 96px; }   \/* m\u00e1s aire respecto al t\u00edtulo; hueco para la tarjeta del mensaje *\/\r\n\/* El relleno de la flecha va en ::after (la flecha en s\u00ed NO se recorta, para que la sombra\r\n   pueda asomar por todo el contorno: muesca izquierda y punta derecha incluidas). *\/\r\n.vl-chev {\r\n  position: relative; flex: 1 1 0; min-width: 0;\r\n  display: flex; align-items: center; gap: 11px;\r\n  height: 80px; padding: 0 14px 0 58px;\r\n  margin-left: -24px;\r\n  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;\r\n}\r\n.vl-chev::after {\r\n  content: ''; position: absolute; inset: 0; z-index: 1;\r\n  background: #FFFFFF;\r\n  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);\r\n  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.08));\r\n  transition: background 0.3s ease, filter 0.32s ease;\r\n}\r\n.vl-chev:first-child { margin-left: 0; padding-left: 58px; }\r\n.vl-chev:first-child::after {\r\n  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);\r\n}\r\n.vl-chev:nth-child(1) { z-index: 6; }\r\n.vl-chev:nth-child(2) { z-index: 5; }\r\n.vl-chev:nth-child(3) { z-index: 4; }\r\n.vl-chev:nth-child(4) { z-index: 3; }\r\n.vl-chev:nth-child(5) { z-index: 2; }\r\n\/* Foco: la etapa enfocada (clase .vl-on puesta por JS, no por :hover puro \u2014 as\u00ed sigue\r\n   marcada aunque el rat\u00f3n baje hacia la tarjeta) se ti\u00f1e de su pastel, se ampl\u00eda y gana\r\n   una sombra marcada que rodea todo su contorno; las dem\u00e1s se aten\u00faan. *\/\r\n.vl-chevflow.vl-has-focus .vl-chev { opacity: 0.32; }\r\n.vl-chevflow.vl-has-focus .vl-chev.vl-on { opacity: 1; z-index: 10; transform: scale(1.04); transform-origin: 50% 100%; }\r\n.vl-chev.vl-on::after {\r\n  filter: drop-shadow(0 4px 13px rgba(0,0,0,0.18)) drop-shadow(0 0 5px rgba(0,0,0,0.13));\r\n}\r\n\/* Cada etapa estrena su propio pastel al enfocarse (amarillo \u2192 azul \u2192 lila \u2192 verde \u2192 rosa) *\/\r\n.vl-chev:nth-child(1).vl-on::after { background: #FBEFB0; }\r\n.vl-chev:nth-child(2).vl-on::after { background: #DCEAF9; }\r\n.vl-chev:nth-child(3).vl-on::after { background: #E7DBFA; }\r\n.vl-chev:nth-child(4).vl-on::after { background: #D6EFD9; }\r\n.vl-chev:nth-child(5).vl-on::after { background: #FAD9DE; }\r\n.vl-chev-ico { position: relative; z-index: 2; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }\r\n.vl-chev-ico svg { width: 29px; height: 29px; }\r\n\/* N\u00famero de paso (1..5) a la izquierda del icono \u2192 se lee como una cadena de pasos *\/\r\n.vl-chev-num {\r\n  position: absolute; left: 33px; top: 50%; transform: translateY(-50%); z-index: 3;\r\n  width: 20px; height: 20px; border-radius: 50%;\r\n  background: #161616; color: #FFFFFF;\r\n  font-size: 10.5px; font-weight: 800; line-height: 1;\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.vl-chev-label { position: relative; z-index: 2; font-size: 15.5px; font-weight: 700; color: #161616; line-height: 1.18; }\r\n\/* Tarjeta del mensaje: aparece SOLO al pasar el rat\u00f3n, posicionada por JS justo debajo de la etapa enfocada (alineada en X) *\/\r\n.vl-chev-caption {\r\n  position: absolute; top: 84px; left: 0;\r\n  width: max-content; max-width: 340px; padding: 14px 22px;\r\n  background: #FFFFFF; color: #2E2E2E;\r\n  border: 1px solid #ECECEC; border-radius: 12px;\r\n  font-size: 15.5px; line-height: 1.45; text-align: center;\r\n  box-shadow: 0 16px 38px -18px rgba(0,0,0,0.20);\r\n  opacity: 0; pointer-events: none; z-index: 12;\r\n  transition: opacity 0.22s ease, left 0.3s cubic-bezier(0.22,1,0.36,1);\r\n}\r\n.vl-chev-caption.is-on { opacity: 1; }\r\n\/* M\u00e1s protagonismo: m\u00e1s aire arriba\/abajo y t\u00edtulo de secci\u00f3n m\u00e1s grande *\/\r\n.vl-section.vl-casos { padding-top: 140px; padding-bottom: 140px; }\r\n.vl-casos h2 { font-size: 44px; line-height: 1.12; }\r\n\r\n\/* M\u00d3VIL + TABLET (incl. vertical \u22641024px): los chevrons se apilan en vertical, apuntando hacia abajo\r\n   (en horizontal, 5 flechas no caben por debajo de ~1080px y el texto\/forma se rompen). *\/\r\n@media (max-width: 1024px) {\r\n  .vl-chevflow { flex-direction: column; margin-top: 30px; padding-bottom: 0; }\r\n  .vl-chev {\r\n    flex: none; width: 100%; height: 64px; margin-left: 0; margin-top: -16px;\r\n    padding: 0 24px 0 56px; gap: 14px;\r\n  }\r\n  .vl-chev::after {\r\n    clip-path: polygon(0 0, 50% 17px, 100% 0, 100% calc(100% - 17px), 50% 100%, 0 calc(100% - 17px));\r\n  }\r\n  .vl-chev:first-child { margin-top: 0; padding-left: 56px; }\r\n  .vl-chev:first-child::after {\r\n    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), 50% 100%, 0 calc(100% - 17px));\r\n  }\r\n  .vl-chev-num { left: 22px; }\r\n  .vl-chev-label { font-size: 14px; }\r\n  .vl-chev-ico svg { width: 26px; height: 26px; }\r\n  .vl-section.vl-casos { padding-top: 72px; padding-bottom: 72px; }\r\n  .vl-casos h2 { font-size: 30px; }\r\n  .vl-chev-caption {\r\n    position: static; display: none; width: auto; max-width: 100%;\r\n    left: auto; margin: 20px auto 0; font-size: 15px;\r\n  }\r\n  .vl-chev-caption.is-on { display: block; }\r\n}\r\n\r\n\r\n\/* (Habia aqui un min-height para igualar la altura de varias citas apiladas.\r\n   Con una sola resena no hace falta y solo anadia hueco muerto.) *\/\r\n\r\n\/* \u2550\u2550\u2550 MURO DE RESE\u00d1AS del fondo de testimonios \u2550\u2550\u2550\r\n   OJO: NO cambiar el position de .vl-tstack-sticky (es sticky y contiene el muro absoluto).\r\n   Son rese\u00f1as REALES de Voicit, con el apellido abreviado por privacidad. *\/\r\n.vl-tstack-sticky > .vl-container { position: relative; z-index: 3; }\r\n\/* \u2550\u2550\u2550 MURO DEL AMOR: rese\u00f1as de fondo (estilo cr\u00e9ditos Star Wars) \u2550\u2550\u2550 *\/\r\n\/* OJO: NO cambiar el position de .vl-tstack-sticky (es sticky y ya contiene el muro absoluto). *\/\r\n.vl-tstack-sticky > .vl-container { position: relative; z-index: 3; }\r\n.vl-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 30%; }\r\n.vl-wall::after {            \/* velo SUTIL: difumina arriba\/abajo (estilo cr\u00e9ditos) + leve halo central, dejando ver el muro *\/\r\n  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;\r\n  background:\r\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%),\r\n    linear-gradient(180deg, #F8F8F8 0%, rgba(248,248,248,0) 20%, rgba(248,248,248,0) 80%, #F8F8F8 100%);\r\n}\r\n.vl-wall-inner {\r\n  position: absolute; left: 50%; top: -8%; width: 168%;\r\n  transform-origin: 50% 0;\r\n  transform: translateX(-50%) rotateX(42deg);\r\n  transform-style: preserve-3d;\r\n  opacity: 0.7; filter: blur(1px);   \/* el muro queda como fondo: suave y desenfocado *\/\r\n  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;\r\n  animation: vl-wall-rise 55s linear infinite;\r\n}\r\n@keyframes vl-wall-rise {\r\n  from { transform: translateX(-50%) rotateX(42deg) translateY(0); }\r\n  to   { transform: translateX(-50%) rotateX(42deg) translateY(-50%); }\r\n}\r\n.vl-wall-card {\r\n  background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 10px;\r\n  padding: 12px 13px; box-shadow: 0 4px 14px -11px rgba(0,0,0,0.10);\r\n  text-align: left;\r\n}\r\n.vl-wall-stars { color: #CFCFCF; font-size: 11px; letter-spacing: 1px; }\r\n.vl-wall-txt { font-size: 12.5px; line-height: 1.4; color: #7C7C7C; margin: 6px 0 8px; }\r\n.vl-wall-who { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #6A6A6A; }\r\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; }\r\n@media (prefers-reduced-motion: reduce) { .vl-wall-inner { animation: none; } }\r\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 *\/\r\n\r\n\/* \u2550\u2550\u2550 M\u00d3VIL VERTICAL: textos resumidos en los pasos 2 y 3 (m\u00e1x. 2 l\u00edneas) \u2550\u2550\u2550 *\/\r\n.vl-p-short { display: none; }\r\n@media (max-width: 599px) {\r\n  .vl-p-full { display: none; }\r\n  .vl-p-short { display: inline; }\r\n}\r\n\r\n\/* El CTA \"Comenzar gratis\" del header m\u00f3vil ahora es GLOBAL (Code Snippets id 25), no por landing. *\/\r\n\r\n\/* \u2550\u2550\u2550 M\u00d3VIL: editor del paso 3 \u2014 al abrir una secci\u00f3n solo se muestra esa (ahorro vertical) \u2550\u2550\u2550 *\/\r\n.vl-mk-editor-done { display: none; }   \/* el bot\u00f3n \"Listo\" solo existe en m\u00f3vil *\/\r\n@media (max-width: 1024px) {\r\n  .vl-mk-editor--solo [data-vl-section]:not(.vl-mk-editor-section--open) { display: none; }\r\n  .vl-mk-editor-done {\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    align-self: flex-end; margin-top: 6px; padding: 9px 22px;\r\n    border: none; border-radius: 8px; cursor: pointer;\r\n    font-size: 13px; font-weight: 700;\r\n  }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 M\u00d3VIL: testimonios SIN scroll fijado \u2014 las 3 rese\u00f1as en flujo normal (scroll t\u00e1ctil fluido) \u2550\u2550\u2550 *\/\r\n@media (max-width: 1024px) {\r\n  .vl-tstack-track { height: auto; }\r\n  .vl-tstack-sticky { position: static; height: auto; padding: 40px 0 56px; overflow: visible; }\r\n  .vl-tstack-cards { min-height: 0; max-width: 540px; }\r\n  .vl-tstack-card {\r\n    position: static !important;\r\n    transform: none !important;\r\n    opacity: 1 !important;\r\n    transition: none !important;\r\n    margin: 0 0 18px !important;\r\n  }\r\n  \/* aire entre las rese\u00f1as y el t\u00edtulo de la siguiente secci\u00f3n (\"Un verdadero cambio\u2026\") *\/\r\n  .vl-tstack-section { padding-bottom: 48px !important; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 DISPOSITIVOS T\u00c1CTILES (iPad \/ iPhone): SIN scroll-jacking en NINGUNA secci\u00f3n fija \u2550\u2550\u2550\r\n   En t\u00e1ctil la barra del navegador se oculta\/muestra al hacer scroll, cambia el alto del viewport\r\n   y los elementos `sticky` \"vibran\" arriba\/abajo. Esto pasa TODAS las secciones fijas a flujo\r\n   normal en cualquier ancho\/orientaci\u00f3n (tambi\u00e9n iPad en horizontal >1024px).\r\n   NO afecta a port\u00e1tiles aunque tengan pantalla t\u00e1ctil: su puntero principal es \"fino\" (trackpad). *\/\r\n@media (hover: none) and (pointer: coarse) {\r\n  .vl-ssteps-track, .vl-cmp-track, .vl-tstack-track, .vl-cta-track { height: auto !important; }\r\n  .vl-ssteps-sticky, .vl-cmp-sticky, .vl-tstack-sticky { position: static !important; height: auto !important; }\r\n  .vl-cta-sticky { position: static !important; height: auto !important; padding: 60px 0 !important; }\r\n  .vl-ssteps-progress { display: none !important; }\r\n  .vl-ssteps-stage { min-height: 0 !important; }\r\n  .vl-sstep {\r\n    position: static !important; inset: auto !important;\r\n    opacity: 1 !important; transform: none !important; pointer-events: auto !important;\r\n    margin: 0 0 64px !important;\r\n  }\r\n  .vl-sstep:last-child { margin-bottom: 0 !important; }\r\n  .vl-tstack-card {\r\n    position: static !important; transform: none !important; opacity: 1 !important;\r\n    transition: none !important; margin: 0 0 18px !important;\r\n  }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ESPEC\u00cdFICO DE ESTA LANDING \u2014 Integraci\u00f3n Voicit + Viterbit\r\n   (lockup del hero, mockups nuevos, vl-segflow, formulario de demo)\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* H1 de esta landing: el titular es m\u00e1s largo que el de la landing de referencia.\r\n   Medido a 1440px (columna real de 715px): a 56px ca\u00eda en 4+4 l\u00edneas; a 48px cae en 2+2. *\/\r\n\/* Tope en 44px: con el titular actual, a 48px la primera linea cae en 3 lineas\r\n   y el H1 queda descompensado (3+1). A 44px queda 2+1. Medido a 1280 y 1440. *\/\r\n.vl-landing h1 { font-size: clamp(32px, 4.2vw, 44px); }\r\n\r\n\/* Colof\u00f3n: credencial de la fuente, enlaces internos y fecha visible *\/\r\n.vl-colofon {\r\n  max-width: 720px; margin: 56px auto 0; padding-top: 28px;\r\n  border-top: 1px solid #ECECEC; text-align: center;\r\n}\r\n.vl-colofon p { font-size: 14px; line-height: 1.6; color: #9A9A9A; }\r\n.vl-colofon p + p { margin-top: 10px; }\r\n.vl-colofon a { color: #6E6E6E; text-decoration: underline; }\r\n.vl-colofon a:hover { color: #161616; }\r\n.vl-colofon-date { font-size: 13px !important; color: #B0B0B0 !important; }\r\n\r\n\/* Enlaces del cuerpo: subrayados y visibles (misma regla de estilo que el blog) *\/\r\n.vl-landing .vl-faq-answer a,\r\n.vl-landing .vl-setup .vl-text-center a,\r\n.vl-landing .vl-tstack-section .vl-text-center a {\r\n  color: #161616;\r\n  text-decoration: underline;\r\n  text-underline-offset: 2px;\r\n}\r\n.vl-landing .vl-faq-answer a:hover,\r\n.vl-landing .vl-setup .vl-text-center a:hover,\r\n.vl-landing .vl-tstack-section .vl-text-center a:hover { color: #046bd2; }\r\n\r\n\/* Los pasos de conexi\u00f3n son encabezados de nivel 3 reales (para que Google y los LLM extraigan el\r\n   procedimiento y case con el HowTo del schema). Pero `.vl-landing h3` (0,1,1) le gana\r\n   a `.vl-chev-label` (0,1,0) y los inflar\u00eda a 28px \u2192 hay que subir la especificidad. *\/\r\n.vl-landing h3.vl-chev-label {\r\n  font-size: 15.5px;\r\n  font-weight: 700;\r\n  line-height: 1.18;\r\n  color: #161616;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n@media (max-width: 1024px) {\r\n  .vl-landing h3.vl-chev-label { font-size: 14px; }\r\n}\r\n\r\n\/* Gemelo visual de un H2 (para no duplicar encabezados en el DOM) *\/\r\n.vl-landing .vl-h2-look {\r\n  font-size: clamp(28px, 3.5vw, 42px);\r\n  font-weight: 700;\r\n  line-height: 1.2;\r\n  letter-spacing: -0.01em;\r\n  color: #161616;\r\n  text-wrap: pretty;\r\n  text-wrap: balance;\r\n}\r\n@media (max-width: 600px) { .vl-landing .vl-h2-look { font-size: 26px; } }\r\n@media (max-width: 375px) { .vl-landing .vl-h2-look { font-size: 24px; } }\r\n\r\n\/* La valoraci\u00f3n va en la p\u00edldora enlazada a la Chrome Web Store (fuente verificable a un\r\n   clic) y NUNCA como marcado de valoraci\u00f3n agregada: no son rese\u00f1as de esta p\u00e1gina. *\/\r\n\r\n\/* \u2500\u2500 Lockup \"Voicit + Viterbit\" del hero \u2500\u2500\r\n   Alturas calculadas para igualar la ALTURA DE LA LETRA (lo que percibe el ojo), no la caja:\r\n   \u00b7 Voicit   viewBox 0 0 291.2 54.17 \u2192 la letra ocupa 39,27 uds; a 26px de caja, letra = 18,85px.\r\n   \u00b7 Viterbit viewBox 83 77 567 123  \u2192 la letra ocupa 85,89 uds (69,8 % del viewBox);\r\n     para que su letra mida tambi\u00e9n 18,85px \u2192 caja = 27px de alto (ancho \u2248 124,5px).\r\n   `flex: 0 0 auto` en ambos: sin \u00e9l, el SVG se encog\u00eda dentro del flex y quedaba a 69\u00d715px. *\/\r\n.vl-hero-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }\r\n.vl-lockup-voicit { height: 26px; width: 140px; flex: 0 0 auto; display: block; }\r\n.vl-lockup-plus { font-size: 22px; font-weight: 800; color: #9A9A9A; line-height: 1; flex: 0 0 auto; }\r\n.vl-lockup-viterbit { height: 27px; width: 124.5px; flex: 0 0 auto; display: block; }\r\n@media (max-width: 768px) {\r\n  .vl-lockup-voicit { height: 22px; width: 118px; }\r\n  .vl-lockup-viterbit { height: 23px; width: 106px; }\r\n}\r\n@media (max-width: 900px) {\r\n  .vl-hero-lockup { justify-content: center; margin-bottom: 0; }\r\n}\r\n\r\n\/* \u2500\u2500 Logo Viterbit inline (reutilizable) + chip azul \u2500\u2500 *\/\r\n.vl-vblogo { height: 15px; width: auto; display: block; flex-shrink: 0; }\r\n\r\n\/* \u2500\u2500 HERO \u2014 mockup del flujo Informe \u2192 Conector \u2192 Ficha Viterbit \u2500\u2500\r\n   La tarjeta del informe aparece PRIMERO (la de la referencia aparec\u00eda al final). *\/\r\n.vl-hm-report { animation-delay: 0.25s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(1) { animation-delay: 0.55s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(2) { animation-delay: 0.75s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(3) { animation-delay: 0.95s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(4) { animation-delay: 1.15s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(1) .vl-mk-section-text { animation-delay: 0.60s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(2) .vl-mk-section-text { animation-delay: 0.80s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(3) .vl-mk-section-text { animation-delay: 1.00s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(4) .vl-mk-section-text { animation-delay: 1.20s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(1) .vl-mk-check { animation-delay: 0.95s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(2) .vl-mk-check { animation-delay: 1.15s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(3) .vl-mk-check { animation-delay: 1.35s; }\r\n.vl-hm-report .vl-mk-section-list li:nth-child(4) .vl-mk-check { animation-delay: 1.55s; }\r\n\/* Tarjeta de informe del hero: compactada (padding y ritmo de la lista).\r\n   Va scoped a .vl-hm-report para no tocar el chasis .vl-mk-template en si. *\/\r\n.vl-hm-report { padding: 13px 16px; }\r\n.vl-hm-report .vl-mk-template-head { padding-bottom: 8px; margin-bottom: 8px; }\r\n.vl-hm-report .vl-mk-section-list { gap: 6px; }\r\n.vl-hm-report .vl-mk-section-list li { font-size: 12px; }\r\n\r\n\/* \u2550\u2550\u2550 FICHA DE CANDIDATO DE VITERBIT (componente compartido) \u2550\u2550\u2550\r\n   Evoca la interfaz real de Viterbit, simplificada: cabecera con avatar cuadrado,\r\n   dos l\u00edneas de metadatos, fila de pesta\u00f1as con la activa en azul y subrayada,\r\n   sub-pesta\u00f1as, y los TRES CAMPOS PERSONALIZADOS que crea Voicit.\r\n   \u00b7 Hero  (.vl-vbcard--fill): los campos se rellenan solos (shimmer \u2192 texto \u2192 check).\r\n   \u00b7 Paso 3 (.vl-vbcard--full): el mismo dise\u00f1o ya completo.\r\n   Paleta de Viterbit: blanco, bordes gris muy claro y azul #0251FE. Sin amarillo de Voicit. *\/\r\n.vl-vbcard {\r\n  position: relative; background: #FFFFFF;\r\n  border: 1px solid #E8E8E8; border-top: 3px solid #0251FE;\r\n  border-radius: 14px; overflow: hidden;\r\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\r\n  width: 100%; max-width: 540px; margin: 0 auto;\r\n}\r\n\/* \u2014 Cabecera \u2014 *\/\r\n.vl-vbcard-head { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 13px 14px 11px; }\r\n.vl-vbcard-ava {\r\n  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;   \/* cuadrado redondeado, como Viterbit *\/\r\n  background: #E8EEFE; color: #0251FE;\r\n  font-size: 14px; font-weight: 800;\r\n  display: inline-flex; align-items: center; justify-content: center;\r\n}\r\n.vl-vbcard-id { min-width: 0; flex: 1 1 0; }\r\n.vl-vbcard-name {\r\n  font-size: 15.5px; font-weight: 800; color: #161616; line-height: 1.2;\r\n  display: flex; align-items: center; gap: 8px; min-width: 0;\r\n}\r\n.vl-vbcard-nametxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.vl-vbcard-tag {\r\n  flex-shrink: 0; background: #E8EEFE; color: #0251FE;\r\n  font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 3px 7px; white-space: nowrap;\r\n}\r\n.vl-vbcard-meta {\r\n  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden;\r\n  font-size: 10.5px; color: #8A8A8A; margin-top: 4px; white-space: nowrap;\r\n}\r\n.vl-vbcard-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }\r\n.vl-vbcard-meta svg { width: 11px; height: 11px; flex-shrink: 0; color: #B0B0B0; }\r\n\/* \u2014 Pesta\u00f1as: la activa en azul y subrayada, como en la ficha real \u2014 *\/\r\n.vl-vbcard-tabs {\r\n  position: relative; display: flex; align-items: center; gap: 14px;\r\n  padding: 0 14px; border-bottom: 1px solid #EFEFEF;\r\n  overflow: hidden; white-space: nowrap;\r\n}\r\n.vl-vbcard-tabs::after {   \/* la fila sigue m\u00e1s all\u00e1 del borde, como en una UI real *\/\r\n  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 34px;\r\n  background: linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF 75%); pointer-events: none;\r\n}\r\n.vl-vbcard-tab {\r\n  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;\r\n  font-size: 10.5px; font-weight: 600; color: #8A8A8A;\r\n  padding: 9px 0; border-bottom: 2px solid transparent; margin-bottom: -1px;\r\n}\r\n.vl-vbcard-tab svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n.vl-vbcard-tab.is-on { color: #0251FE; font-weight: 700; border-bottom-color: #0251FE; }\r\n\/* \u2014 Sub-pesta\u00f1as \u2014 *\/\r\n.vl-vbcard-subtabs {\r\n  position: relative; display: flex; align-items: center; gap: 13px;\r\n  padding: 8px 14px; border-bottom: 1px solid #F4F4F4; background: #FCFCFD;\r\n  overflow: hidden; white-space: nowrap;\r\n}\r\n.vl-vbcard-subtabs::after {\r\n  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 30px;\r\n  background: linear-gradient(90deg, rgba(252,252,253,0), #FCFCFD 75%); pointer-events: none;\r\n}\r\n.vl-vbcard-subtab { flex-shrink: 0; font-size: 10px; font-weight: 600; color: #9A9A9A; }\r\n.vl-vbcard-subtab.is-on { color: #161616; font-weight: 700; }\r\n\/* \u2014 Campos personalizados que crea Voicit \u2014 *\/\r\n.vl-vbcard-fields { padding: 11px 14px 14px; }\r\n.vl-vbcard-fhead {\r\n  display: flex; align-items: center; gap: 7px;\r\n  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;\r\n  color: #A0A0A0; margin-bottom: 8px;\r\n}\r\n.vl-vbcard-fhead::after { content: ''; flex: 1 1 auto; height: 1px; background: #F0F0F0; }\r\n.vl-vbcard-row {\r\n  display: flex; align-items: flex-start; gap: 10px;\r\n  padding: 8px 10px; border: 1px solid #EDEFF5; border-radius: 8px;\r\n  background: #FBFCFE; margin-bottom: 7px;\r\n}\r\n.vl-vbcard-row:last-child { margin-bottom: 0; }\r\n.vl-vbcard-k { flex: 0 0 auto; max-width: 46%; font-size: 10.5px; font-weight: 700; color: #5B6478; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.vl-vbcard-v { flex: 1 1 auto; min-width: 0; position: relative; min-height: 16px; display: flex; align-items: flex-start; gap: 8px; }\r\n\/* Una sola linea por campo: lo que no cabe se recorta con puntos suspensivos. *\/\r\n.vl-vbcard-txt {\r\n  font-size: 11.5px; line-height: 1.4; color: #2A2A2A; flex: 1 1 auto; min-width: 0;\r\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\r\n}\r\n.vl-vbcard-link { color: #0251FE; text-decoration: underline; text-underline-offset: 2px; }\r\n.vl-vbcard-ok {\r\n  flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;\r\n  background: #0251FE; color: #FFFFFF; font-size: 8px; font-weight: 800; line-height: 1;\r\n  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;\r\n}\r\n\/* Barra \"cargando\" (solo en la variante que se rellena) *\/\r\n.vl-vbcard-skel { display: none; }\r\n.vl-vbcard--fill .vl-vbcard-skel {\r\n  display: block; position: absolute; inset: 1px 0 1px 0; border-radius: 5px;\r\n  background: linear-gradient(90deg, #EDF0F7 0%, #F8FAFD 50%, #EDF0F7 100%);\r\n  background-size: 220% 100%;\r\n  animation: vl-vbskel 0.9s linear infinite, vl-vbskel-out 0.22s ease-in forwards;\r\n  animation-delay: 0s, var(--d);\r\n}\r\n@keyframes vl-vbskel { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }\r\n@keyframes vl-vbskel-out { to { opacity: 0; visibility: hidden; } }\r\n.vl-vbcard--fill .vl-vbcard-txt,\r\n.vl-vbcard--fill .vl-vbcard-ok { opacity: 0; animation: vl-vbfill 0.28s ease-out var(--d, 3.85s) forwards; }\r\n.vl-vbcard--fill .vl-vbcard-ok { animation: vl-vbpop 0.3s cubic-bezier(0.34,1.56,0.64,1) var(--d, 3.85s) forwards; }\r\n@keyframes vl-vbfill { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }\r\n@keyframes vl-vbpop  { from { opacity: 0; transform: scale(0.4); }      to { opacity: 1; transform: scale(1); } }\r\n\/* Ritmo del relleno: 3 campos, encadenados tras el conector del hero *\/\r\n\/* OJO: dentro de .vl-vbcard-fields el primer hijo es la cabecera\r\n   \"Campos personalizados\", asi que las filas son 2, 3 y 4. *\/\r\n.vl-vbcard--fill .vl-vbcard-row:nth-child(2) { --d: 3.05s; }\r\n.vl-vbcard--fill .vl-vbcard-row:nth-child(3) { --d: 3.45s; }\r\n.vl-vbcard--fill .vl-vbcard-row:nth-child(4) { --d: 3.85s; }\r\n.vl-vbcard--fill { opacity: 0; transform: translateY(-4px); animation: vl-fade-down 0.4s ease-out 2.75s forwards; }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .vl-vbcard--fill { opacity: 1; transform: none; animation: none; }\r\n  .vl-vbcard--fill .vl-vbcard-skel { display: none; }\r\n  .vl-vbcard--fill .vl-vbcard-txt, .vl-vbcard--fill .vl-vbcard-ok { opacity: 1; animation: none; }\r\n}\r\n\/* Entrada del paso 3 (estado final), una sola vez al entrar en pantalla *\/\r\n.vl-vbcard--full .vl-vbcard-row { opacity: 0; }\r\n.vl-vbcard--full.is-visible .vl-vbcard-row { animation: vl-vbfill 0.34s ease-out forwards; }\r\n.vl-vbcard--full.is-visible .vl-vbcard-row:nth-child(1) { animation-delay: 0.14s; }\r\n.vl-vbcard--full.is-visible .vl-vbcard-row:nth-child(2) { animation-delay: 0.34s; }\r\n.vl-vbcard--full.is-visible .vl-vbcard-row:nth-child(3) { animation-delay: 0.54s; }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .vl-vbcard--full .vl-vbcard-row { opacity: 1; animation: none !important; }\r\n}\r\n@media (max-width: 600px) {\r\n  .vl-vbcard-head { padding: 11px 12px 9px; gap: 9px; }\r\n  .vl-vbcard-ava { width: 36px; height: 36px; border-radius: 8px; font-size: 12.5px; }\r\n  .vl-vbcard-name { font-size: 14px; }\r\n  .vl-vbcard-meta { font-size: 10px; gap: 8px; }\r\n  .vl-vbcard-tabs, .vl-vbcard-subtabs { padding-left: 12px; padding-right: 12px; }\r\n  .vl-vbcard-fields { padding: 10px 12px 12px; }\r\n  .vl-vbcard-txt { font-size: 11px; }\r\n}\r\n\r\n\/* \u2500\u2500 MOCKUP PASO 1 \u2014 Entrevista con transcripci\u00f3n en vivo \u2500\u2500 *\/\r\n.vl-mk-rec {\r\n  position: relative; background: #FFFFFF; border-radius: 14px;\r\n  border: 1px solid #E8E8E8; box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\r\n  max-width: 560px; margin: 0 auto;\r\n}\r\n.vl-mk-rec-pill {\r\n  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;\r\n  background: #161616; color: #FFFFFF;\r\n  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;\r\n  border-radius: 100px; padding: 4px 11px; white-space: nowrap;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.vl-mk-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #FF5F57; animation: vl-blink 1.4s ease-in-out infinite; flex-shrink: 0; }\r\n.vl-mk-rec-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }\r\n.vl-mk-rec-line { display: flex; flex-direction: column; gap: 3px; opacity: 0; }\r\n.vl-mk-rec-who { font-size: 11.5px; font-weight: 800; color: #161616; }\r\n.vl-mk-rec-line--cand .vl-mk-rec-who { color: #6E6E6E; }\r\n.vl-mk-rec-txt { font-size: 13px; line-height: 1.5; color: #424242; }\r\n.vl-mk-rec-live { display: flex; align-items: center; gap: 10px; font-size: 12.5px; opacity: 0; }\r\n.vl-mk-rec-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; }\r\n.vl-mk-rec-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: #161616; transform-origin: bottom; animation: vl-rec-eq 1.1s ease-in-out infinite; }\r\n.vl-mk-rec-eq i:nth-child(1) { animation-delay: 0s; }\r\n.vl-mk-rec-eq i:nth-child(2) { animation-delay: 0.15s; }\r\n.vl-mk-rec-eq i:nth-child(3) { animation-delay: 0.30s; }\r\n.vl-mk-rec-eq i:nth-child(4) { animation-delay: 0.45s; }\r\n.vl-mk-rec-eq i:nth-child(5) { animation-delay: 0.60s; }\r\n@keyframes vl-rec-eq {\r\n  0%, 100% { transform: scaleY(0.3); }\r\n  50%      { transform: scaleY(1); }\r\n}\r\n@media (prefers-reduced-motion: reduce) { .vl-mk-rec-eq i, .vl-mk-rec-dot { animation: none; } }\r\n\/* Entrada al hacer scroll (.is-visible, mismo patr\u00f3n que el chat de la referencia) *\/\r\n.vl-mk-rec.is-visible .vl-mk-rec-line { animation: vl-chat-li-in 0.45s ease-out forwards; }\r\n.vl-mk-rec.is-visible .vl-mk-rec-line:nth-child(1) { animation-delay: 0.20s; }\r\n.vl-mk-rec.is-visible .vl-mk-rec-line:nth-child(2) { animation-delay: 0.85s; }\r\n.vl-mk-rec.is-visible .vl-mk-rec-line:nth-child(3) { animation-delay: 1.55s; }\r\n.vl-mk-rec.is-visible .vl-mk-rec-live { animation: vl-chat-fade-up 0.4s ease-out 2.15s forwards; }\r\n@keyframes vl-rec-eq {\r\n  0%, 100% { transform: scaleY(0.3); }\r\n  50%      { transform: scaleY(1); }\r\n}\r\n\r\n\r\n\/* \u2500\u2500 MOCKUP PASO 2 \u2014 Informe generado (chasis del editor, enriquecido) \u2500\u2500 *\/\r\n.vl-mk-rep-sec .vl-mk-editor-section-head { cursor: default; }\r\n.vl-mk-rep-sec .vl-mk-editor-section-head:hover { background: transparent; }\r\n.vl-mk-rep-prev {\r\n  padding: 0 14px 12px 15px; font-size: 12px; line-height: 1.5; color: #6E6E6E;\r\n  overflow: hidden;\r\n}\r\n\/* Cabecera con identidad: de qui\u00e9n es el informe y qui\u00e9n lo ha generado *\/\r\n.vl-rep-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #EEEEEE; background: #FAFAFA; border-radius: 14px 14px 0 0; }\r\n.vl-rep-ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: #ECECEC; color: #5A5A5A; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }\r\n.vl-rep-id { min-width: 0; flex: 1 1 0; }\r\n.vl-rep-name { font-size: 13.5px; font-weight: 700; color: #161616; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.vl-rep-role { font-size: 11px; color: #6E6E6E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.vl-rep-by { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: #161616; color: #FFFFFF; font-size: 9.5px; font-weight: 700; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }\r\n.vl-rep-by::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #E7FE15; flex-shrink: 0; }\r\n\/* Acento pastel por secci\u00f3n + icono: rompe el gris sin gritar *\/\r\n.vl-mk-rep-sec { border-left: 3px solid var(--acc, #E5E5E5); }\r\n.vl-mk-rep-sec:nth-child(1) { --acc: #F0D97A; }\r\n.vl-mk-rep-sec:nth-child(2) { --acc: #9BC0EE; }\r\n.vl-mk-rep-sec:nth-child(3) { --acc: #C3A9E8; }\r\n.vl-mk-rep-sec:nth-child(4) { --acc: #8FCF9E; }\r\n.vl-rep-ico { flex-shrink: 0; width: 15px; height: 15px; color: #7A7A7A; display: inline-flex; }\r\n.vl-rep-ico svg { width: 15px; height: 15px; }\r\n.vl-mk-rep-sec:nth-child(1) .vl-rep-ico { color: #A88410; }\r\n.vl-mk-rep-sec:nth-child(2) .vl-rep-ico { color: #3C72B8; }\r\n.vl-mk-rep-sec:nth-child(3) .vl-rep-ico { color: #7A54B5; }\r\n.vl-mk-rep-sec:nth-child(4) .vl-rep-ico { color: #2F8B4C; }\r\n\/* Chip de conclusi\u00f3n: la valoraci\u00f3n concluye algo, no solo describe *\/\r\n.vl-rep-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; background: #E5F3E8; color: #26713E; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 9px; }\r\n.vl-rep-chip svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n\/* Trazabilidad al minuto *\/\r\n.vl-rep-src { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: #9A9A9A; text-decoration: underline; text-underline-offset: 2px; }\r\n.vl-rep-src svg { width: 11px; height: 11px; flex-shrink: 0; }\r\n\r\n\/* ANIMACION DE DESPLIEGUE (la ya validada, ~1,25 s), con los iconos encadenados *\/\r\n.vl-mk-editor .vl-mk-editor-section.vl-mk-rep-sec { opacity: 0; transform: translateY(7px); }\r\n.vl-mk-editor.is-visible .vl-mk-editor-section.vl-mk-rep-sec { animation: vl-rep-in 0.32s cubic-bezier(0.22,1,0.36,1) forwards; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(1) { animation-delay: 0.08s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(2) { animation-delay: 0.30s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(3) { animation-delay: 0.52s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(4) { animation-delay: 0.74s; }\r\n@keyframes vl-rep-in { to { opacity: 1; transform: none; } }\r\n.vl-mk-rep-sec .vl-rep-ico { opacity: 0; transform: scale(0.5); }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec .vl-rep-ico { animation: vl-rep-ico 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(1) .vl-rep-ico { animation-delay: 0.18s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(2) .vl-rep-ico { animation-delay: 0.40s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(3) .vl-rep-ico { animation-delay: 0.62s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(4) .vl-rep-ico { animation-delay: 0.84s; }\r\n@keyframes vl-rep-ico { to { opacity: 1; transform: scale(1); } }\r\n.vl-mk-rep-sec .vl-mk-rep-prev { max-height: 0; opacity: 0; padding-bottom: 0; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec .vl-mk-rep-prev { animation: vl-rep-open 0.30s ease-out forwards; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(1) .vl-mk-rep-prev { animation-delay: 0.22s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(2) .vl-mk-rep-prev { animation-delay: 0.44s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(3) .vl-mk-rep-prev { animation-delay: 0.66s; }\r\n.vl-mk-editor.is-visible .vl-mk-rep-sec:nth-child(4) .vl-mk-rep-prev { animation-delay: 0.88s; }\r\n@keyframes vl-rep-open { to { max-height: 110px; opacity: 1; padding-bottom: 12px; } }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .vl-mk-editor .vl-mk-editor-section.vl-mk-rep-sec { opacity: 1; transform: none; animation: none !important; }\r\n  .vl-mk-rep-sec .vl-mk-rep-prev { max-height: 110px; opacity: 1; padding-bottom: 12px; animation: none !important; }\r\n  .vl-mk-rep-sec .vl-rep-ico { opacity: 1; transform: none; animation: none !important; }\r\n}\r\n\r\n\/* \u2500\u2500 FICHAS INDEPENDIENTES (vl-segflow) \u2014 mismo lenguaje visual que los chevrons,\r\n      pero SIN secuencia: sin puntas, sin n\u00fameros, separadas por gap. \u2500\u2500 *\/\r\n.vl-segflow { display: flex; gap: 24px; margin-top: 66px; position: relative; padding-bottom: 96px; }\r\n.vl-seg {\r\n  position: relative; flex: 1 1 0; min-width: 0;\r\n  display: flex; align-items: center; justify-content: center; gap: 12px;\r\n  height: 88px; padding: 0 22px;\r\n  background: #FFFFFF; border-radius: 16px;\r\n  box-shadow: 0 3px 9px rgba(0,0,0,0.08);\r\n  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease, background 0.3s ease, box-shadow 0.32s ease;\r\n}\r\n\/* Foco por clases JS (.vl-on \/ .vl-has-focus), igual que los chevrons \u2014\r\n   la regla de iluminar tiene M\u00c1S clases que la de atenuar (trampa de especificidad). *\/\r\n.vl-segflow.vl-has-focus .vl-seg { opacity: 0.32; }\r\n.vl-segflow.vl-has-focus .vl-seg.vl-on {\r\n  opacity: 1; z-index: 10;\r\n  transform: scale(1.04); transform-origin: 50% 100%;\r\n  box-shadow: 0 4px 13px rgba(0,0,0,0.18), 0 0 5px rgba(0,0,0,0.13);\r\n}\r\n\/* Pastel propio por ficha (colores literales por nth-child) *\/\r\n.vl-seg:nth-child(1).vl-on { background: #FBEFB0; }\r\n.vl-seg:nth-child(2).vl-on { background: #DCEAF9; }\r\n.vl-seg:nth-child(3).vl-on { background: #E7DBFA; }\r\n.vl-seg .vl-chev-label { text-align: left; }\r\n\r\n\/* \u2500\u2500 Tarjeta del mensaje flotante (chevrons Y fichas): compacta \u2500\u2500\r\n   Antes heredaba 18px\/30,6px y resultaba enorme. Va DESPU\u00c9S del bloque base\r\n   y de su media query \u22641024px, as\u00ed que gana en ambos casos (misma especificidad). *\/\r\n.vl-landing .vl-chev-caption {\r\n  font-size: 14px; line-height: 1.45;\r\n  max-width: 300px; padding: 12px 18px; border-radius: 10px;\r\n}\r\n\/* La descripci\u00f3n vive en un span traducible (TranslatePress NO traduce data-*):\r\n   oculto en escritorio (la muestra la tarjeta del mensaje), visible en m\u00f3vil. *\/\r\n.vl-seg-desc { display: none; }\r\n.vl-chev-desc { display: none; }\r\n.vl-segflow .vl-chev-caption { top: 96px; }\r\n@media (max-width: 1024px) {\r\n  .vl-segflow { flex-direction: column; gap: 14px; margin-top: 30px; padding-bottom: 0; }\r\n  .vl-seg { height: auto; padding: 18px 20px; flex-wrap: wrap; justify-content: flex-start; }\r\n  .vl-seg-desc { display: block; flex-basis: 100%; font-size: 14px; line-height: 1.5; color: #6E6E6E; margin-top: 6px; }\r\n  .vl-segflow .vl-chev-caption { display: none; }\r\n  \/* En t\u00e1ctil no hay :hover \u2192 la descripci\u00f3n de cada etapa se muestra SIEMPRE dentro\r\n     del propio chevron (que pasa a alto autom\u00e1tico), no en la tarjeta flotante. *\/\r\n  .vl-chevflow .vl-chev {\r\n    height: auto; min-height: 64px;\r\n    padding: 18px 24px 26px 56px; flex-wrap: wrap; align-items: flex-start;\r\n  }\r\n  \/* z-index 2: sin \u00e9l, el relleno blanco del ::after (z-index 1) tapaba el texto. *\/\r\n  .vl-chev-desc {\r\n    position: relative; z-index: 2;\r\n    display: block; flex-basis: 100%; font-size: 14px; line-height: 1.5;\r\n    color: #6E6E6E; margin-top: 4px;\r\n  }\r\n  \/* El n\u00famero deja de ir centrado en vertical (con alto autom\u00e1tico ca\u00eda a media tarjeta) *\/\r\n  .vl-chevflow .vl-chev-num { top: 20px; transform: none; }\r\n  .vl-chevflow .vl-chev-ico { margin-top: -2px; }\r\n  .vl-chevflow .vl-chev-label { flex: 1 1 auto; min-width: 0; }\r\n  .vl-chevflow .vl-chev-caption { display: none !important; }\r\n}\r\n\r\n\/* \u2500\u2500 SECCI\u00d3N \"Puesta en marcha\": pegada a los pilares, sin doble respiro \u2500\u2500 *\/\r\n.vl-section.vl-casos.vl-setup { padding-top: 40px; }\r\n\r\n\/* \u2500\u2500 Pain 1: el icono \"candidato en el limbo\" no debe voltearse 180\u00b0 (era un reloj de arena);\r\n      leve elevaci\u00f3n en su lugar. Misma especificidad, declarada despu\u00e9s \u2192 gana. \u2500\u2500 *\/\r\n.vl-card--pain-1:hover .vl-pain-icon-svg { transform: translateY(-4px); }\r\n\r\n\/* \u2500\u2500 Testimonios: la atribuci\u00f3n es an\u00f3nima (no hay permiso de nombre todav\u00eda),\r\n      as\u00ed que el avatar es un GLIFO NEUTRO, no unas iniciales inventadas. \u2500\u2500 *\/\r\n.vl-testimonial-avatar--glyph {\r\n  background: #EDEDED;\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.vl-testimonial-avatar--glyph svg { width: 26px; height: 26px; color: #8A8A8A; }\r\n\r\n\r\n<\/style>\r\n\r\n<!-- Respaldo sin JS: casi todo el contenido arranca en opacity:0 y lo revela un\r\n     IntersectionObserver. Los crawlers de IA no ejecutan JS; esto garantiza que\r\n     igualmente vean el texto renderizado. -->\r\n<noscript><style>.vl-landing .vl-reveal{opacity:1 !important;transform:none !important}<\/style><\/noscript>\r\n\r\n<div class=\"vl-landing\">\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       HERO SECTION\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section vl-dots\" style=\"padding-top:60px;padding-bottom:80px;background:#F8F8F8;\">\r\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"vl-container\">\r\n\r\n      <div style=\"display:flex;align-items:center;gap:40px;\" class=\"vl-hero-flex\">\r\n        <!-- Columna izquierda: texto -->\r\n        <div style=\"flex:1.8;min-width:0;\">\r\n\r\n          <!-- Lockup de la integraci\u00f3n: Voicit + Viterbit (estilo \"A + B\") -->\r\n          <div class=\"vl-hero-lockup\" aria-label=\"Integraci\u00f3n Voicit y Viterbit\">\r\n            <!-- Logo en linea (no <img>): LiteSpeed le aplicaba lazy-load y tardaba en\r\n                 aparecer pese a estar en lo mas alto de la pagina. Asi carga con el HTML,\r\n                 igual que el de Viterbit, y los dos entran a la vez. -->\r\n            <svg class=\"vl-lockup-voicit\" viewBox=\"0 0 291.2 54.17\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Voicit\"><path fill=\"#1a171b\" d=\"M72.18,36.11v-18h-18v18c-8.6,0-12.93-5.21-19.84-14.43C27.06,12,18.05,0,0,0V18.07c8.6,0,12.93,5.22,19.84,14.43,7.24,9.65,16.25,21.67,34.3,21.67V36.11ZM90.23,0h-18v18h18Z\"\/><path fill=\"#1a171b\" d=\"M291.2,53.08V46.64c-5.12.76-9.12.66-10.87-2.33-.94-1.6-.8-3.89-.8-7.05V19.92H291.2V13.81H279.53V2.91H271.9v10.9h-7.53v6.11h7.53V37.63c0,4.29-.26,7.45,1.45,10.68,2.87,5.46,10.47,6.22,17.85,4.77m-40,0h7.6V13.81h-7.6Zm0-45.7h7.6V0h-7.6ZM227,54.17c8.44,0,14.55-4.18,17.13-11.89l-7.71-1.82C234.79,44.68,231.85,47,227,47c-7.19,0-10.87-5.45-10.9-13.56,0-7.85,3.45-13.55,10.9-13.55a9.87,9.87,0,0,1,9.57,7l7.56-2.19c-2-7.37-8.44-12-17-12-11.88,0-19,8.58-19.08,20.72.07,12,6.94,20.73,19,20.73m-34.33-1.09h7.6V13.81h-7.6Zm0-45.7h7.6V0h-7.6Zm-38.3,26c0-8,3.53-13.52,11.16-13.52,7.42,0,11.2,5.3,11.2,13.52,0,8-3.71,13.59-11.2,13.59-7.34,0-11.16-5.3-11.16-13.59M165.5,54.17c11.71,0,19.27-8.47,19.27-20.76,0-12.14-7.49-20.69-19.27-20.69-11.56,0-19.23,8.4-19.23,20.69s7.45,20.76,19.23,20.76m-43.31-1.09h7.71l14.25-39.27h-7.67L126,43.55,115.61,13.81h-7.67Z\"\/><\/svg>\r\n            <span class=\"vl-lockup-plus\" aria-hidden=\"true\">+<\/span>\r\n            <svg class=\"vl-lockup-viterbit\" viewBox=\"83 77 567 123\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Viterbit\"><g fill=\"#0251FE\"><path d=\"M649.69 124.5V110.64H621.64V85.62H606.95L603.95 110.64H589.77V124.5H603.95V165.77C603.95 173.74 605.17 180.06 607.61 184.73C610.16 189.4 613.88 192.7 618.76 194.61C623.65 196.52 629.65 197.48 636.77 197.48H649.68V181.23H635.34C630.99 181.23 627.58 180.06 625.14 177.73C622.8 175.29 621.63 171.83 621.63 167.37V124.51H649.68L649.69 124.5Z\"\/><path d=\"M555.13 196.52V110.63H573.77V196.52H555.13ZM564.31 98.68C560.48 98.68 557.62 97.67 555.7 95.65C553.89 93.63 552.99 91.03 552.99 87.84C552.99 84.65 553.89 82.21 555.7 80.19C557.61 78.07 560.48 77 564.31 77C568.14 77 571.11 78.06 572.91 80.19C574.82 82.21 575.78 84.76 575.78 87.84C575.78 90.92 574.82 93.63 572.91 95.65C571.1 97.67 568.24 98.68 564.31 98.68Z\"\/><path d=\"M368.88 150.31C368.88 142.87 367.34 135.97 364.26 129.59C361.18 123.11 356.56 117.85 350.4 113.81C344.24 109.77 336.54 107.75 327.3 107.75C320.18 107.75 313.91 109.03 308.5 111.58C303.19 114.02 298.78 117.37 295.27 121.62C291.76 125.76 289.11 130.49 287.3 135.8C285.6 141.01 284.75 146.42 284.75 152.05V155.08C284.75 160.6 285.6 166.02 287.3 171.33C289.11 176.53 291.76 181.26 295.27 185.51C298.78 189.65 303.29 193 308.81 195.55C314.33 198.1 320.82 199.38 328.25 199.38C335.16 199.38 341.32 198.21 346.73 195.87C352.15 193.53 356.61 190.19 360.12 185.83C363.73 181.47 366.12 176.37 367.29 170.53H349.92C349.07 174.04 346.73 177.12 342.91 179.77C339.09 182.32 334.2 183.6 328.25 183.6C322.3 183.6 317.41 182.33 313.59 179.77C309.76 177.12 306.95 173.56 305.14 169.09C303.78 165.65 302.93 161.88 302.6 157.78H368.88V150.29V150.31ZM313.43 127.36C317.15 124.81 321.77 123.54 327.29 123.54C332.81 123.54 337.01 124.71 340.52 127.05C344.03 129.28 346.68 132.52 348.49 136.77C349.59 139.29 350.35 142.11 350.78 145.22H303.11C303.56 142.58 304.24 140.13 305.15 137.89C306.96 133.43 309.72 129.92 313.44 127.37L313.43 127.36Z\"\/><path d=\"M276.6 124.5V110.64H248.55V85.62H233.86L230.86 110.64H216.68V124.5H230.86V165.77C230.86 173.74 232.08 180.06 234.53 184.73C237.08 189.4 240.8 192.7 245.68 194.61C250.57 196.52 256.57 197.48 263.69 197.48H276.6V181.23H262.26C257.9 181.23 254.5 180.06 252.06 177.73C249.72 175.29 248.55 171.83 248.55 167.37V124.51H276.6V124.5Z\"\/><path d=\"M182.05 196.52V110.63H200.69V196.52H182.05ZM191.23 98.68C187.41 98.68 184.54 97.67 182.63 95.65C180.82 93.63 179.92 91.03 179.92 87.84C179.92 84.65 180.82 82.21 182.63 80.19C184.54 78.07 187.41 77 191.23 77C195.05 77 198.03 78.06 199.83 80.19C201.74 82.21 202.7 84.76 202.7 87.84C202.7 90.92 201.74 93.63 199.83 95.65C198.02 97.67 195.16 98.68 191.23 98.68Z\"\/><path d=\"M147.85 110.63L127.6 181.39H125.58L102.44 110.63H83L112.04 196.52H116.3H123.27H130.53H137.18H140.64L166.02 110.63H147.85Z\"\/><path d=\"M421.88 109.68C416.68 109.68 412.21 110.74 408.5 112.87C404.78 114.89 401.91 118.18 399.89 122.75C399.26 124.21 398.75 125.83 398.33 127.59H397.34V110.64H383V196.53H401.64V141.87C401.64 136.66 402.97 132.73 405.62 130.08C408.28 127.42 412.21 126.1 417.41 126.1H436.05V109.69H421.87L421.88 109.68Z\"\/><path d=\"M536.15 134.54C534.34 129.23 531.63 124.61 528.02 120.68C524.51 116.64 520.26 113.51 515.27 111.28C510.38 109.05 504.91 107.93 498.86 107.93C492.27 107.93 486.32 109.36 481.01 112.23C476.26 114.79 471.43 120.05 469.41 124.59H468.42V80.2H449.78V196.53H462.6L464.6 183.04H465.6C470.16 188.54 473.37 191.69 478.78 194.78C484.3 197.86 490.57 199.4 497.58 199.4C503.85 199.4 509.53 198.23 514.63 195.89C519.73 193.55 524.09 190.37 527.7 186.33C531.42 182.19 534.23 177.46 536.15 172.15C538.06 166.84 539.02 161.1 539.02 154.94V151.75C539.02 145.59 538.06 139.85 536.15 134.54ZM517.03 168.96C514.91 173.42 511.88 176.93 507.95 179.48C504.02 182.03 499.45 183.31 494.25 183.31C489.68 183.31 485.38 182.3 481.34 180.28C477.3 178.26 474.01 175.34 471.46 171.52C469.02 167.59 467.79 162.92 467.79 157.5V150.65C467.79 145.02 469.01 140.24 471.46 136.31C473.9 132.27 477.14 129.19 481.18 127.07C485.22 124.95 489.57 123.88 494.25 123.88C499.46 123.88 503.97 125.1 507.79 127.54C511.72 129.98 514.8 133.44 517.03 137.9C519.26 142.26 520.38 147.41 520.38 153.36C520.38 159.31 519.27 164.41 517.03 168.98V168.96Z\"\/><\/g><\/svg>\r\n          <\/div>\r\n\r\n          <h1 class=\"vl-mb-24\">\r\n            El informe autom\u00e1tico de la entrevista, en Viterbit con un clic.<br>\r\n            <span style=\"color:#6E6E6E;\">Tu pipeline, siempre al d\u00eda.<\/span>\r\n          <\/h1>\r\n\r\n          <p style=\"font-size:20px;color:#424242;max-width:620px;\" class=\"vl-mb-32\">\r\n            Voicit genera informes autom\u00e1ticos de cada candidato tras cada entrevista y los guarda en Viterbit con un clic \u2014 incluidos los candidatos que no llegan a la final. Recupera la informaci\u00f3n que hoy se pierde y construye una base de datos de talento viva.\r\n          <\/p>\r\n\r\n          <div style=\"display:flex;gap:16px;flex-wrap:wrap;\" class=\"vl-hero-actions\">\r\n            <a href=\"https:\/\/app.voicit.com\/login\" class=\"vl-btn vl-btn--primary\">\r\n              Conectar con Viterbit\r\n            <\/a>\r\n            <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" target=\"_blank\" rel=\"noopener nofollow\" class=\"vl-btn vl-btn--secondary\" data-vl-agenda>\r\n              Pide una demo\r\n            <\/a>\r\n          <\/div>\r\n\r\n          <div style=\"display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap;\">\r\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;\">\r\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>\r\n              4.8 de 5 <span class=\"vl-stars\">\u2605\u2605\u2605\u2605\u2605<\/span> +350 rese\u00f1as\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Columna derecha: mockup del flujo PDF \u2192 IA \u2192 Plantilla -->\r\n        <div style=\"flex:1;min-width:0;\">\r\n          <div class=\"vl-hero-mockup\">\r\n\r\n            <!-- FASE 1: Informe de entrevista generado por Voicit -->\r\n            <div class=\"vl-mk-template vl-hm-report\">\r\n              <div class=\"vl-mk-template-head\">\r\n                <div class=\"vl-mk-template-title\">Informe \u00b7 Laura G\u00f3mez<\/div>\r\n                <button type=\"button\" class=\"vl-mk-genbtn\" data-vl-gen aria-label=\"Guardar en Viterbit\">Guardar en Viterbit<\/button>\r\n              <\/div>\r\n              <ul class=\"vl-mk-section-list\">\r\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Experiencia<\/span><\/li>\r\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Motivaci\u00f3n<\/span><\/li>\r\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Disponibilidad<\/span><\/li>\r\n                <li><span class=\"vl-mk-check\">\u2713<\/span><span class=\"vl-mk-section-text\">Valoraci\u00f3n<\/span><\/li>\r\n              <\/ul>\r\n            <\/div>\r\n\r\n            <!-- Conector 1 (flecha corta: 28px de huella frente a los 48px de antes) -->\r\n            <div class=\"vl-mk-arrow vl-mk-arrow--1\">\r\n              <svg width=\"16\" height=\"18\" viewBox=\"0 0 16 18\" fill=\"none\">\r\n                <path d=\"M8 0v13m-5-5l5 5 5-5\" stroke=\"#9A9A9A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- \"M\u00e1quina\" Voicit procesando -->\r\n            <div class=\"vl-mk-machine\">\r\n              <div class=\"vl-mk-machine-pulse\"><\/div>\r\n              <div class=\"vl-mk-machine-content\">\r\n                <div class=\"vl-mk-machine-logo\">\r\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>\r\n                  <span>Conector Voicit \u00b7 Viterbit<\/span>\r\n                <\/div>\r\n                <div class=\"vl-mk-machine-status\">\r\n                  <span class=\"vl-mk-dot\"><\/span>\r\n                  <span class=\"vl-mk-shimmer\">Guardando en la ficha del candidato\u2026<\/span>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <!-- Conector 2 (flecha corta) -->\r\n            <div class=\"vl-mk-arrow vl-mk-arrow--2\">\r\n              <svg width=\"16\" height=\"18\" viewBox=\"0 0 16 18\" fill=\"none\">\r\n                <path d=\"M8 0v13m-5-5l5 5 5-5\" stroke=\"#9A9A9A\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- FASE 2: los tres campos personalizados que crea Voicit se rellenan solos -->\r\n            <div class=\"vl-vbcard vl-vbcard--fill\">\r\n              <div class=\"vl-vbcard-head\">\r\n                <span class=\"vl-vbcard-ava\" aria-hidden=\"true\">LG<\/span>\r\n                <div class=\"vl-vbcard-id\">\r\n                  <div class=\"vl-vbcard-name\"><span class=\"vl-vbcard-nametxt\">Laura G\u00f3mez<\/span><span class=\"vl-vbcard-tag\">Ventas<\/span><\/div>\r\n                  <div class=\"vl-vbcard-meta\">\r\n                    <span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"3.6\" fill=\"currentColor\"\/><path d=\"M5 20.5c0-3.6 3.1-6 7-6s7 2.4 7 6v.5H5v-.5z\" fill=\"currentColor\"\/><\/svg>Marta R.<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M8 3v5M16 3v5M3.5 10.5h17\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>28 jul<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 3v18M3 12h18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>LinkedIn<\/span>\r\n                  <\/div>\r\n                  <div class=\"vl-vbcard-meta\">\r\n                    <span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3\" y=\"5.5\" width=\"18\" height=\"13\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"m3.8 7 8.2 6 8.2-6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>laura@gmail.com<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M7 3.5h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5l1.5-2 4 1.5v3c0 1-.8 1.8-1.8 1.7C10.6 18.9 5.1 13.4 4.3 5.3 4.2 4.3 5 3.5 6 3.5H7z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>+34 000 00 00 00<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>Valencia<\/span>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"vl-vbcard-tabs\" aria-hidden=\"true\">\r\n                <span class=\"vl-vbcard-tab is-on\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"3.6\" fill=\"currentColor\"\/><path d=\"M5 20.5c0-3.6 3.1-6 7-6s7 2.4 7 6v.5H5v-.5z\" fill=\"currentColor\"\/><\/svg>Perfil<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 5.5h16v11H9l-5 4v-15z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linejoin=\"round\"\/><\/svg>Mensajes<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"m12 3.5 2.6 5.3 5.9.85-4.25 4.15 1 5.8L12 16.85 6.75 19.6l1-5.8L3.5 9.65l5.9-.85L12 3.5z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>Evaluaciones (0)<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"16.6\" r=\"1\" fill=\"currentColor\"\/><\/svg>Preguntas (0)<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 12h4l2.5-6 4 12 2.5-6h5\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>Actividad<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 3h8l5 5v13H6z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><path d=\"M14 3v5h5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>Docs (3)<\/span>\r\n              <\/div>\r\n              <div class=\"vl-vbcard-subtabs\" aria-hidden=\"true\">\r\n                <span class=\"vl-vbcard-subtab is-on\">Talent AI<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Curriculum<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Info adicional<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Carta de presentaci\u00f3n<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Informe<\/span>\r\n              <\/div>\r\n              <div class=\"vl-vbcard-fields\">\r\n                <div class=\"vl-vbcard-fhead\">Campos personalizados<\/div>\r\n                <div class=\"vl-vbcard-row\">\r\n                  <span class=\"vl-vbcard-k\">URL Entrevista Voicit<\/span>\r\n                  <span class=\"vl-vbcard-v\">\r\n                    <span class=\"vl-vbcard-skel\" aria-hidden=\"true\"><\/span>\r\n                    <span class=\"vl-vbcard-txt\"><span class=\"vl-vbcard-link\">voicit.com\/e\/8f3a\u2026<\/span><\/span>\r\n                    <span class=\"vl-vbcard-ok\" aria-hidden=\"true\">\u2713<\/span>\r\n                  <\/span>\r\n                <\/div>\r\n                <div class=\"vl-vbcard-row\">\r\n                  <span class=\"vl-vbcard-k\">Resumen Entrevista Voicit<\/span>\r\n                  <span class=\"vl-vbcard-v\">\r\n                    <span class=\"vl-vbcard-skel\" aria-hidden=\"true\"><\/span>\r\n                    <span class=\"vl-vbcard-txt\">6 a\u00f1os en ventas B2B. Busca recorrido internacional.<\/span>\r\n                    <span class=\"vl-vbcard-ok\" aria-hidden=\"true\">\u2713<\/span>\r\n                  <\/span>\r\n                <\/div>\r\n                <div class=\"vl-vbcard-row\">\r\n                  <span class=\"vl-vbcard-k\">Informe Voicit<\/span>\r\n                  <span class=\"vl-vbcard-v\">\r\n                    <span class=\"vl-vbcard-skel\" aria-hidden=\"true\"><\/span>\r\n                    <span class=\"vl-vbcard-txt\">Informe completo de la entrevista, por secciones.<\/span>\r\n                    <span class=\"vl-vbcard-ok\" aria-hidden=\"true\">\u2713<\/span>\r\n                  <\/span>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       LOGOS DE CONFIANZA\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section style=\"padding:32px 0;border-top:1px solid #F2F2F2;border-bottom:1px solid #F2F2F2;overflow:hidden;\">\r\n    <div class=\"vl-container vl-text-center\">\r\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>\r\n      <div style=\"overflow:hidden;\">\r\n        <div class=\"vl-logos-track\">\r\n          <!-- 6 logos de clientes reales (cabecera de voicit.com) -->\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\r\n          <!-- Duplicados para loop continuo -->\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\r\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       PROBLEMA \/ PAIN POINTS\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section vl-pain-section vl-dots\">\r\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"vl-container\">\r\n\r\n      <div class=\"vl-text-center vl-mb-64 vl-reveal\">\r\n        <h2 class=\"vl-mb-16\" style=\"max-width:920px;margin-left:auto;margin-right:auto;\">Lo que hoy se pierde entre la entrevista y Viterbit<\/h2>\r\n        <p style=\"max-width:680px;margin:0 auto;\">Da igual que trabajes en una consultora de RRHH o como reclutador interno: si entrevistas y usas Viterbit, esto te suena.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"vl-grid-3\">\r\n        <!-- Pain 1 -->\r\n        <div class=\"vl-card vl-card--pain vl-card--pain-1 vl-pain-card vl-reveal vl-reveal-delay-1\">\r\n          <div class=\"vl-pain-inner\">\r\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\"><circle cx=\"16\" cy=\"11.5\" r=\"4.5\" fill=\"#1A171B\"\/><path d=\"M7.5 24.5c0-4.2 3.8-7 8.5-7s8.5 2.8 8.5 7v1h-17v-1z\" fill=\"#1A171B\"\/><circle cx=\"16\" cy=\"16\" r=\"14.4\" stroke=\"#1A171B\" stroke-width=\"2\" stroke-dasharray=\"3.4 3.4\" fill=\"none\"\/><\/svg><\/div>\r\n          <h3 class=\"vl-mb-8\">Los no-finalistas se quedan sin informe<\/h3>\r\n          <p class=\"text-small\">Si el candidato no avanza, la entrevista no se documenta: ese perfil queda en el limbo, sin registro en Viterbit.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Pain 2 -->\r\n        <div class=\"vl-card vl-card--pain vl-card--pain-2 vl-pain-card vl-reveal vl-reveal-delay-2\">\r\n          <div class=\"vl-pain-inner\">\r\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=\"M20.5 4.5l7 7L13 26H6v-7L20.5 4.5z\" fill=\"#1A171B\"\/><rect x=\"4\" y=\"28\" width=\"24\" height=\"2.5\" rx=\"1\" fill=\"#1A171B\"\/><\/svg><\/div>\r\n          <h3 class=\"vl-mb-8\">Actualizar el ATS a mano<\/h3>\r\n          <p class=\"text-small\">Tras cada entrevista toca volcar las notas a la ficha del candidato\u2026 o directamente no se hace.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Pain 3 -->\r\n        <div class=\"vl-card vl-card--pain vl-card--pain-3 vl-pain-card vl-reveal vl-reveal-delay-3\">\r\n          <div class=\"vl-pain-inner\">\r\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\"><ellipse cx=\"16\" cy=\"7\" rx=\"11\" ry=\"4\" fill=\"#1A171B\"\/><path d=\"M5 7v18c0 2.2 4.9 4 11 4s11-1.8 11-4V7c0 2.2-4.9 4-11 4S5 9.2 5 7z\" fill=\"#1A171B\"\/><path d=\"M5 13.5c0 2.2 4.9 4 11 4s11-1.8 11-4M5 19.5c0 2.2 4.9 4 11 4s11-1.8 11-4\" stroke=\"#F2F2F2\" stroke-width=\"1.6\" fill=\"none\"\/><\/svg><\/div>\r\n          <h3 class=\"vl-mb-8\">Talento que no puedes reutilizar<\/h3>\r\n          <p class=\"text-small\">Los candidatos que ya entrevistaste siguen en el ATS, pero sin informe no hay nada que consultar ni forma de recuperarlos.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SOLUCI\u00d3N \u2014 C\u00f3mo funciona (3 pasos)\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section--alt vl-ssteps\">\r\n\r\n    <!-- T\u00edtulo en flujo normal SOLO para m\u00f3vil\/tablet: sube y desaparece al hacer scroll.\r\n         Este es el encabezado REAL de la secci\u00f3n: es el que ve Googlebot smartphone\r\n         (indexaci\u00f3n mobile-first). Su gemelo de escritorio es un p\u00e1rrafo con la misma pinta. -->\r\n    <div class=\"vl-ssteps-mtitle vl-container\">\r\n      <h2 style=\"margin:0 auto;\">De la entrevista a la ficha en Viterbit, en 3 pasos<\/h2>\r\n    <\/div>\r\n    <div class=\"vl-ssteps-track\">\r\n      <div class=\"vl-ssteps-sticky\">\r\n        <div class=\"vl-container\">\r\n\r\n          <div class=\"vl-text-center vl-mb-32 vl-ssteps-dtitle\">\r\n            <!-- Gemelo visual del titular de arriba. NO es un encabezado real, para no\r\n                 duplicarlo en el DOM. Sin aria-hidden a prop\u00f3sito: en escritorio el encabezado\r\n                 real est\u00e1 en display:none, as\u00ed que si este tambi\u00e9n se ocultase a los lectores\r\n                 de pantalla la secci\u00f3n se quedar\u00eda sin t\u00edtulo anunciado. -->\r\n            <p class=\"vl-h2-look\" style=\"margin:0 auto;\">De la entrevista a la ficha en Viterbit, en 3 pasos<\/p>\r\n          <\/div>\r\n\r\n          <!-- Indicador de progreso de los pasos -->\r\n          <div class=\"vl-ssteps-progress\">\r\n            <span data-sstep-dot=\"0\"><\/span><span data-sstep-dot=\"1\"><\/span><span data-sstep-dot=\"2\"><\/span>\r\n          <\/div>\r\n\r\n          <!-- Escenario: los 3 pasos apilados, solo uno visible seg\u00fan el scroll -->\r\n          <div class=\"vl-ssteps-stage\">\r\n\r\n      <!-- Paso 1 -->\r\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"0\">\r\n        <div style=\"flex:1;\">\r\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\r\n            <div class=\"vl-step-number\">1<\/div>\r\n            <h3>Entrevista con Voicit, como siempre<\/h3>\r\n          <\/div>\r\n          <p class=\"vl-mb-16\"><span class=\"vl-p-full\">Voicit graba, transcribe y analiza la entrevista \u2014 videollamada, tel\u00e9fono o presencial. Nada cambia en tu rutina.<\/span><span class=\"vl-p-short\">Voicit graba y analiza la entrevista. Nada cambia en tu rutina.<\/span><span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Funciona con Meet, Teams, Zoom, llamadas de tel\u00e9fono y entrevistas presenciales. T\u00fa solo tienes que entrevistar.<\/span><\/span><\/p>\r\n        <\/div>\r\n        <div style=\"flex:1;\">\r\n          <!-- MOCKUP PASO 1: Entrevista con transcripci\u00f3n en vivo -->\r\n          <div class=\"vl-mk-rec\">\r\n            <div class=\"vl-mk-fp-header\">\r\n              <span class=\"vl-mk-fp-dots\"><span><\/span><span><\/span><span><\/span><\/span>\r\n              <span class=\"vl-mk-fp-title\">Entrevista \u2014 Laura G\u00f3mez<\/span>\r\n              <span class=\"vl-mk-rec-pill\"><span class=\"vl-mk-rec-dot\" aria-hidden=\"true\"><\/span>REC 24:31<\/span>\r\n            <\/div>\r\n            <div class=\"vl-mk-rec-body\">\r\n              <div class=\"vl-mk-rec-line\">\r\n                <span class=\"vl-mk-rec-who\">Marta \u00b7 entrevistadora<\/span>\r\n                <span class=\"vl-mk-rec-txt\">Cu\u00e9ntame qu\u00e9 te llev\u00f3 a especializarte en ventas B2B.<\/span>\r\n              <\/div>\r\n              <div class=\"vl-mk-rec-line vl-mk-rec-line--cand\">\r\n                <span class=\"vl-mk-rec-who\">Laura \u00b7 candidata<\/span>\r\n                <span class=\"vl-mk-rec-txt\">Empec\u00e9 gestionando cuentas clave y en dos a\u00f1os pas\u00e9 a liderar el equipo de nuevas aperturas\u2026<\/span>\r\n              <\/div>\r\n              <div class=\"vl-mk-rec-line\">\r\n                <span class=\"vl-mk-rec-who\">Marta \u00b7 entrevistadora<\/span>\r\n                <span class=\"vl-mk-rec-txt\">\u00bfY qu\u00e9 buscas en tu pr\u00f3ximo proyecto?<\/span>\r\n              <\/div>\r\n              <div class=\"vl-mk-rec-live\">\r\n                <span class=\"vl-mk-rec-eq\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/span>\r\n                <span class=\"vl-mk-shimmer\">Transcribiendo\u2026<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Paso 2 -->\r\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"1\">\r\n        <div style=\"flex:1;\">\r\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\r\n            <div class=\"vl-step-number\">2<\/div>\r\n            <h3>El informe se genera solo, con tu plantilla<\/h3>\r\n          <\/div>\r\n          <p class=\"vl-mb-16\"><span class=\"vl-p-full\">Al terminar la entrevista, Voicit redacta el informe seg\u00fan tu plantilla. El experto en selecci\u00f3n lo revisa, lo ajusta si hace falta y pulsa \u00abGuardar en Viterbit\u00bb.<\/span><span class=\"vl-p-short\">Voicit redacta el informe con tu plantilla; lo revisas y pulsas \u00abGuardar en Viterbit\u00bb.<\/span><span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Todos los informes salen homog\u00e9neos: misma estructura y mismo nivel de detalle, entreviste quien entreviste.<\/span><\/span><\/p>\r\n        <\/div>\r\n        <div style=\"flex:1;\">\r\n          <!-- MOCKUP PASO 2: Informe generado + bot\u00f3n \"Guardar en Viterbit\" -->\r\n          <div class=\"vl-mk-editor\">\r\n\r\n            <!-- Cabecera del informe -->\r\n            <div class=\"vl-mk-editor-head\">\r\n              <span class=\"vl-mk-editor-title\">Informe \u2014 Laura G\u00f3mez<\/span>\r\n            <\/div>\r\n\r\n            <!-- Cuerpo: secciones del informe ya redactadas -->\r\n            <div class=\"vl-mk-editor-body\">\r\n\r\n              <div class=\"vl-mk-editor-section vl-mk-rep-sec\">\r\n                <div class=\"vl-mk-editor-section-head\"><span class=\"vl-mk-editor-name\">Experiencia<\/span><\/div>\r\n                <div class=\"vl-mk-rep-prev\">6 a\u00f1os en ventas B2B, 2 liderando equipo\u2026<\/div>\r\n              <\/div>\r\n\r\n              <div class=\"vl-mk-editor-section vl-mk-rep-sec\">\r\n                <div class=\"vl-mk-editor-section-head\"><span class=\"vl-mk-editor-name\">Motivaci\u00f3n<\/span><\/div>\r\n                <div class=\"vl-mk-rep-prev\">Busca un proyecto con m\u00e1s recorrido internacional\u2026<\/div>\r\n              <\/div>\r\n\r\n              <div class=\"vl-mk-editor-section vl-mk-rep-sec\">\r\n                <div class=\"vl-mk-editor-section-head\"><span class=\"vl-mk-editor-name\">Disponibilidad<\/span><\/div>\r\n                <div class=\"vl-mk-rep-prev\">15 d\u00edas \u00b7 modalidad h\u00edbrida \u00b7 Valencia<\/div>\r\n              <\/div>\r\n\r\n              <div class=\"vl-mk-editor-section vl-mk-rep-sec\">\r\n                <div class=\"vl-mk-editor-section-head\"><span class=\"vl-mk-editor-name\">Valoraci\u00f3n<\/span><\/div>\r\n                <div class=\"vl-mk-rep-prev\">Encaja con el perfil; avanzar a entrevista con cliente\u2026<\/div>\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n            <!-- Pie con acci\u00f3n de guardar en el ATS -->\r\n            <div class=\"vl-mk-editor-footer\">\r\n              <button type=\"button\" class=\"vl-mk-editor-action vl-mk-editor-action--primary\" data-vl-save>Guardar en Viterbit<\/button>\r\n            <\/div>\r\n\r\n            <!-- Toast de confirmaci\u00f3n -->\r\n            <div class=\"vl-mk-editor-toast\">\r\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>\r\n              <span>Guardado en Viterbit<\/span>\r\n            <\/div>\r\n\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Paso 3 -->\r\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"2\">\r\n        <div style=\"flex:1;\">\r\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\r\n            <div class=\"vl-step-number\">3<\/div>\r\n            <h3>La ficha del candidato se completa sola<\/h3>\r\n          <\/div>\r\n          <p class=\"vl-mb-16\"><span class=\"vl-p-full\">Pulsas \u00abGuardar en Viterbit\u00bb y la ficha queda actualizada. Cada entrevistado queda documentado, avance o no en el proceso.<\/span><span class=\"vl-p-short\">Pulsas \u00abGuardar en Viterbit\u00bb y la ficha queda actualizada, avance o no el candidato.<\/span><span class=\"vl-info-tooltip\"><span class=\"vl-info-icon\">i<\/span><span class=\"vl-info-text\">Al pulsar el bot\u00f3n, Voicit localiza al candidato por su email \u2014el identificador \u00fanico de Viterbit\u2014 y escribe la informaci\u00f3n en su ficha sin que tengas que copiar ni pegar nada.<\/span><\/span><\/p>\r\n        <\/div>\r\n        <div style=\"flex:1;\">\r\n          <!-- MOCKUP PASO 3: la misma ficha, con los tres campos ya rellenos -->\r\n          <div class=\"vl-vbcard vl-vbcard--full\">\r\n              <div class=\"vl-vbcard-head\">\r\n                <span class=\"vl-vbcard-ava\" aria-hidden=\"true\">LG<\/span>\r\n                <div class=\"vl-vbcard-id\">\r\n                  <div class=\"vl-vbcard-name\"><span class=\"vl-vbcard-nametxt\">Laura G\u00f3mez<\/span><span class=\"vl-vbcard-tag\">Ventas<\/span><\/div>\r\n                  <div class=\"vl-vbcard-meta\">\r\n                    <span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"3.6\" fill=\"currentColor\"\/><path d=\"M5 20.5c0-3.6 3.1-6 7-6s7 2.4 7 6v.5H5v-.5z\" fill=\"currentColor\"\/><\/svg>Marta R.<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M8 3v5M16 3v5M3.5 10.5h17\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>28 jul<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 3v18M3 12h18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>LinkedIn<\/span>\r\n                  <\/div>\r\n                  <div class=\"vl-vbcard-meta\">\r\n                    <span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"3\" y=\"5.5\" width=\"18\" height=\"13\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"m3.8 7 8.2 6 8.2-6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>laura@gmail.com<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M7 3.5h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5l1.5-2 4 1.5v3c0 1-.8 1.8-1.8 1.7C10.6 18.9 5.1 13.4 4.3 5.3 4.2 4.3 5 3.5 6 3.5H7z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>+34 000 00 00 00<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>Valencia<\/span>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"vl-vbcard-tabs\" aria-hidden=\"true\">\r\n                <span class=\"vl-vbcard-tab is-on\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"3.6\" fill=\"currentColor\"\/><path d=\"M5 20.5c0-3.6 3.1-6 7-6s7 2.4 7 6v.5H5v-.5z\" fill=\"currentColor\"\/><\/svg>Perfil<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 5.5h16v11H9l-5 4v-15z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linejoin=\"round\"\/><\/svg>Mensajes<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"m12 3.5 2.6 5.3 5.9.85-4.25 4.15 1 5.8L12 16.85 6.75 19.6l1-5.8L3.5 9.65l5.9-.85L12 3.5z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>Evaluaciones (0)<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"16.6\" r=\"1\" fill=\"currentColor\"\/><\/svg>Preguntas (0)<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 12h4l2.5-6 4 12 2.5-6h5\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>Actividad<\/span>\r\n                <span class=\"vl-vbcard-tab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 3h8l5 5v13H6z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><path d=\"M14 3v5h5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>Docs (3)<\/span>\r\n              <\/div>\r\n              <div class=\"vl-vbcard-subtabs\" aria-hidden=\"true\">\r\n                <span class=\"vl-vbcard-subtab is-on\">Talent AI<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Curriculum<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Info adicional<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Carta de presentaci\u00f3n<\/span>\r\n                <span class=\"vl-vbcard-subtab\">Informe<\/span>\r\n              <\/div>\r\n              <div class=\"vl-vbcard-fields\">\r\n                <div class=\"vl-vbcard-fhead\">Campos personalizados<\/div>\r\n                <div class=\"vl-vbcard-row\">\r\n                  <span class=\"vl-vbcard-k\">URL Entrevista Voicit<\/span>\r\n                  <span class=\"vl-vbcard-v\">\r\n                    <span class=\"vl-vbcard-txt\"><span class=\"vl-vbcard-link\">voicit.com\/e\/8f3a\u2026<\/span><\/span>\r\n                    <span class=\"vl-vbcard-ok\" aria-hidden=\"true\">\u2713<\/span>\r\n                  <\/span>\r\n                <\/div>\r\n                <div class=\"vl-vbcard-row\">\r\n                  <span class=\"vl-vbcard-k\">Resumen Entrevista Voicit<\/span>\r\n                  <span class=\"vl-vbcard-v\">\r\n                    <span class=\"vl-vbcard-txt\">6 a\u00f1os en ventas B2B. Busca recorrido internacional.<\/span>\r\n                    <span class=\"vl-vbcard-ok\" aria-hidden=\"true\">\u2713<\/span>\r\n                  <\/span>\r\n                <\/div>\r\n                <div class=\"vl-vbcard-row\">\r\n                  <span class=\"vl-vbcard-k\">Informe Voicit<\/span>\r\n                  <span class=\"vl-vbcard-v\">\r\n                    <span class=\"vl-vbcard-txt\">Informe completo de la entrevista, por secciones.<\/span>\r\n                    <span class=\"vl-vbcard-ok\" aria-hidden=\"true\">\u2713<\/span>\r\n                  <\/span>\r\n                <\/div>\r\n              <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n          <\/div><!-- \/vl-ssteps-stage -->\r\n        <\/div><!-- \/vl-container -->\r\n      <\/div><!-- \/vl-ssteps-sticky -->\r\n    <\/div><!-- \/vl-ssteps-track -->\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       PILARES DE VALOR (fichas independientes \u2014 NO es secuencia \u2192 vl-segflow)\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section vl-section--alt vl-dots vl-casos\" style=\"background:#F8F8F8;\">\r\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"vl-container\">\r\n\r\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\r\n        <h2 class=\"vl-mb-16\">Lo que la integraci\u00f3n te aporta<\/h2>\r\n        <p style=\"max-width:700px;margin:0 auto;\">Voicit no busca candidatos ni hace sourcing: documenta las entrevistas que ya haces y las convierte en informes comparables.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"vl-segflow vl-reveal\">\r\n\r\n        <div class=\"vl-seg\">\r\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M27 16a11 11 0 1 1-3.6-8.1\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M27 4v7h-7\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"16\" cy=\"16\" r=\"3.4\" fill=\"#1A171B\"\/><\/svg><\/span>\r\n          <span class=\"vl-chev-label\">Talento que puedes reactivar<\/span>\r\n          <span class=\"vl-seg-desc\">Cada persona entrevistada queda documentada en su ficha, as\u00ed que el siguiente proceso arranca con candidatos ya evaluados en lugar de desde cero.<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"vl-seg\">\r\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 10l14 9-6.2 1.4L23 27l-3.4 1.6-3.2-6.4L12 26V10z\" fill=\"#1A171B\"\/><path d=\"M8 5l1.5 3.5M4.5 9.5L8 11M14 4l-1 3.6\" stroke=\"#1A171B\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n          <span class=\"vl-chev-label\">Nadie cambia su forma de trabajar<\/span>\r\n          <span class=\"vl-seg-desc\">Se entrevista igual que siempre y el volcado al ATS es un clic, sin cambiar el flujo de trabajo de nadie.<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"vl-seg\">\r\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"4\" y=\"12\" width=\"7\" height=\"16\" rx=\"1.6\" fill=\"#1A171B\"\/><rect x=\"12.5\" y=\"7\" width=\"7\" height=\"21\" rx=\"1.6\" fill=\"#1A171B\"\/><rect x=\"21\" y=\"12\" width=\"7\" height=\"16\" rx=\"1.6\" fill=\"#1A171B\"\/><path d=\"M4 4h24\" stroke=\"#1A171B\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n          <span class=\"vl-chev-label\">Informes homog\u00e9neos, decisiones comparables<\/span>\r\n          <span class=\"vl-seg-desc\">Todos salen de la misma plantilla, as\u00ed que puedes comparar candidatos y justificar la decisi\u00f3n con el mismo criterio.<\/span>\r\n        <\/div>\r\n\r\n        <p class=\"vl-chev-caption\" id=\"vl-seg-cap\"><\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       PUESTA EN MARCHA (proceso secuencial \u2192 vl-chevflow)\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section vl-dots vl-casos vl-setup\" id=\"conectar\" style=\"background:#F8F8F8;\">\r\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"vl-container\">\r\n\r\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\r\n        <h2 class=\"vl-mb-16\">C\u00f3mo conectar Voicit con Viterbit<\/h2>\r\n        <p style=\"max-width:760px;margin:0 auto;\">Voicit es la IA que documenta la entrevista; <a href=\"https:\/\/viterbit.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Viterbit<\/a>, el ATS \u2014<i>Applicant Tracking System<\/i>\u2014 donde vive el candidato. Se conectan de forma nativa con una <a href=\"https:\/\/viterbit.readme.io\/reference\/start\" target=\"_blank\" rel=\"noopener nofollow\">API Key<\/a>, en tres pasos.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"vl-chevflow vl-reveal\">\r\n\r\n        <div class=\"vl-chev\">\r\n          <span class=\"vl-chev-num\">1<\/span>\r\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6\" stroke=\"#1A171B\" stroke-width=\"3\" fill=\"none\"\/><path d=\"M15 15L27.5 27.5M22.5 22.5l4-4M18.8 18.8l3.4-3.4\" stroke=\"#1A171B\" stroke-width=\"3\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n          <h3 class=\"vl-chev-label\">Crea la API Key en Viterbit<\/h3>\r\n          <span class=\"vl-chev-desc\">La genera un administrador de Viterbit en Ajustes, en el apartado \u00abAPI Keys\u00bb: nueva clave con nombre VOICIT y permisos de lectura y escritura en Candidatos y Candidaturas. Si tu cuenta no tiene la API activa, el soporte de Viterbit la activa al momento desde el chat.<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"vl-chev\">\r\n          <span class=\"vl-chev-num\">2<\/span>\r\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11 4v6M21 4v6\" stroke=\"#1A171B\" stroke-width=\"3\" stroke-linecap=\"round\"\/><path d=\"M7 10h18v5a9 9 0 01-7 8.77V29h-4v-5.23A9 9 0 017 15v-5z\" fill=\"#1A171B\"\/><\/svg><\/span>\r\n          <h3 class=\"vl-chev-label\">P\u00e9gala en Voicit<\/h3>\r\n          <span class=\"vl-chev-desc\">Introduce la API Key en Voicit y la integraci\u00f3n queda activada para toda tu cuenta. La clave se almacena cifrada y no hay nada que instalar.<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"vl-chev\">\r\n          <span class=\"vl-chev-num\">3<\/span>\r\n          <span class=\"vl-chev-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M5 12a11 11 0 0 1 18-3.5\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M27 20a11 11 0 0 1-18 3.5\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M23 3v6h-6M9 29v-6h6\" stroke=\"#1A171B\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n          <h3 class=\"vl-chev-label\">Guarda el informe con un clic<\/h3>\r\n          <span class=\"vl-chev-desc\">A partir de ah\u00ed, al terminar cada entrevista revisas el informe y pulsas \u00abGuardar en Viterbit\u00bb: se vuelca a la ficha del candidato. No hay nada m\u00e1s que configurar.<\/span>\r\n        <\/div>\r\n\r\n        <p class=\"vl-chev-caption\" id=\"vl-chev-cap\"><\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       TESTIMONIAL\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       TESTIMONIOS (4 clientes reales RRHH)\r\n       Las fotos est\u00e1n como iniciales \u2014 sustituir por LinkedIn \/ Google\r\n       cuando el cliente d\u00e9 permiso. URLs LinkedIn al final de cada bloque.\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section vl-section--alt vl-tstack-section\" style=\"padding:0;background:#F8F8F8;\">\r\n    <div class=\"vl-tstack-track\">\r\n      <div class=\"vl-tstack-sticky\">\r\n\r\n            <!-- Muro de resenas de fondo, portado de landing-buscador-oportunidades.\r\n                 son reales, con el apellido abreviado por privacidad. -->\r\n            <div class=\"vl-wall\" aria-hidden=\"true\" data-nosnippet>\r\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>\r\n              <\/div>\r\n\r\n        <div class=\"vl-container\">\r\n\r\n          <div class=\"vl-text-center\" style=\"margin-bottom:90px;\">\r\n            <h2 class=\"vl-mb-16\">Lo que dicen quienes ya la usan<\/h2>\r\n            <p style=\"font-size:18px;color:#6E6E6E;max-width:620px;margin:0 auto;\">\r\n              Un clic al terminar la entrevista y los campos del candidato quedan rellenos en Viterbit.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"vl-tstack-cards\">\r\n\r\n            <!-- Testimonio 1: Cristina Muler (Brandty), early adopter de la integracion.\r\n                 CITA TEXTUAL de su correo. No reescribir: es una persona real con nombre\r\n                 y apellido. Si hace falta otro mensaje, va en el copy de alrededor. -->\r\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"0\">\r\n              <p class=\"vl-testimonial-text\">\r\n                Con un clic pasamos toda la informaci\u00f3n de la entrevista a Viterbit. Nos ahorra much\u00edsimo tiempo y el pipeline est\u00e1 siempre actualizado, avance el candidato o no.\r\n              <\/p>\r\n              <div class=\"vl-testimonial-author\">\r\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>\r\n                <div>\r\n                  <div class=\"vl-testimonial-name\">Cristina Muler<\/div>\r\n                  <div class=\"vl-testimonial-role\">CEO \u00b7 Brandty<br>Consultora de Selecci\u00f3n<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       EL ANTES Y EL DESPU\u00c9S (comparativa)\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section vl-cmp-section\">\r\n   <div class=\"vl-cmp-track\">\r\n    <div class=\"vl-cmp-sticky\">\r\n    <div class=\"vl-container\">\r\n\r\n      <div class=\"vl-text-center vl-mb-48\">\r\n        <h2 class=\"vl-mb-16\">Tu pipeline en Viterbit, antes y despu\u00e9s<\/h2>\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vl-compare-grid\">\r\n\r\n        <!-- Card \"Antes\" -->\r\n        <div class=\"vl-compare-card vl-compare-card--before\">\r\n          <span class=\"vl-compare-label\">Antes<\/span>\r\n          <h3 class=\"vl-compare-title\">Entrevistas que no dejan rastro<\/h3>\r\n          <ul class=\"vl-compare-list\">\r\n            <li>\r\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\r\n              <span>Solo los finalistas acaban con informe; el resto queda en el limbo<\/span>\r\n            <\/li>\r\n            <li>\r\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\r\n              <span>Las notas acaban en el ATS a mano \u2014 cuando queda tiempo<\/span>\r\n            <\/li>\r\n            <li>\r\n              <span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span>\r\n              <span>El talento entrevistado no se puede buscar ni reactivar despu\u00e9s<\/span>\r\n            <\/li>\r\n          <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Flecha de transformaci\u00f3n (visible solo en desktop) -->\r\n        <div class=\"vl-compare-arrow vl-cmp-after\" aria-hidden=\"true\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path d=\"M6 16h20m-6-6l6 6-6 6\" pathLength=\"1\" stroke=\"#9A9A9A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <!-- Card \"Ahora\" -->\r\n        <div class=\"vl-compare-card vl-compare-card--after vl-cmp-after\">\r\n          <span class=\"vl-compare-label\">Ahora<\/span>\r\n          <h3 class=\"vl-compare-title\">Con Voicit conectado a Viterbit<\/h3>\r\n          <ul class=\"vl-compare-list\">\r\n            <li>\r\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\r\n              <span>Cada entrevista deja un informe completo en la ficha del candidato<\/span>\r\n            <\/li>\r\n            <li>\r\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\r\n              <span>El equipo entrevista como siempre; actualizar Viterbit es un clic<\/span>\r\n            <\/li>\r\n            <li>\r\n              <span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span>\r\n              <span>Base de datos de talento viva: candidatos reactivables con todo su contexto<\/span>\r\n            <\/li>\r\n          <\/ul>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n    <\/div><!-- \/vl-cmp-sticky -->\r\n   <\/div><!-- \/vl-cmp-track -->\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       CTA FINAL (p\u00edldora oscura sobre fondo gris claro)\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-cta-section\" style=\"background:#F8F8F8;text-align:center;\">\r\n   <div class=\"vl-cta-track\">\r\n    <div class=\"vl-cta-sticky\">\r\n      <div class=\"vl-container\">\r\n        <div class=\"vl-cta-pill\" id=\"vl-cta-pill\">\r\n\r\n          <h2 class=\"vl-cta-title vl-mb-16\" style=\"color:#161616;\">Recupera la informaci\u00f3n que hoy se pierde<\/h2>\r\n          <p style=\"font-size:18px;color:#424242;max-width:560px;margin:0 auto 28px;\">\r\n            Te ense\u00f1amos la integraci\u00f3n funcionando en tu Viterbit.\r\n          <\/p>\r\n\r\n          <div style=\"display:flex;gap:16px;justify-content:center;flex-wrap:wrap;\">\r\n            <a href=\"https:\/\/app.voicit.com\/login\" class=\"vl-btn vl-btn--brand\">\r\n              Conecta con Viterbit\r\n            <\/a>\r\n            <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" target=\"_blank\" rel=\"noopener nofollow\" class=\"vl-btn vl-btn--secondary\" data-vl-agenda>\r\n              Pide una demo\r\n            <\/a>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/div><!-- \/vl-cta-sticky -->\r\n   <\/div><!-- \/vl-cta-track -->\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       FAQ\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <section class=\"vl-section\">\r\n    <div class=\"vl-container--narrow\">\r\n\r\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\r\n        <h2>Preguntas frecuentes sobre la integraci\u00f3n con Viterbit<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"vl-faq vl-reveal\">\r\n        <details name=\"vl-faq\">\r\n          <summary>\u00bfViterbit genera informes de entrevista autom\u00e1ticamente?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>No. Viterbit permite escribir un informe de candidato a mano desde la ficha, pero no genera el informe por s\u00ed solo ni transcribe la conversaci\u00f3n. Esa parte la hace Voicit: graba la entrevista, la transcribe y redacta el informe con tu plantilla. Despu\u00e9s, un clic lo guarda en Viterbit. Si te interesa el detalle, explicamos <a href=\"https:\/\/voicit.com\/blog\/recursos-humanos\/informes-entrevistas-ia\/6998\/\">c\u00f3mo se genera un informe de entrevista con IA<\/a> en una gu\u00eda aparte.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details name=\"vl-faq\">\r\n          <summary>\u00bfC\u00f3mo se guardan los informes de entrevista en Viterbit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Conectando Voicit con Viterbit mediante una API Key. Voicit graba y transcribe la entrevista y genera el informe con tu plantilla; al pulsar \u00abGuardar en Viterbit\u00bb, rellena los campos de Voicit en la ficha del candidato \u2014localizado por su email\u2014, sin copiar ni pegar nada.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details name=\"vl-faq\">\r\n          <summary>\u00bfViterbit transcribe las entrevistas?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>No. Viterbit es el ATS: organiza candidatos, ofertas y procesos de selecci\u00f3n. La grabaci\u00f3n, la transcripci\u00f3n y el an\u00e1lisis de la entrevista los hace Voicit, y el resultado acaba dentro de la ficha del candidato en Viterbit. Todo queda donde ya trabajas.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details name=\"vl-faq\">\r\n          <summary>\u00bfQu\u00e9 es la integraci\u00f3n de Voicit con Viterbit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Es una conexi\u00f3n nativa por API Key que env\u00eda el informe de cada entrevista a la ficha del candidato en Viterbit. <a href=\"https:\/\/viterbit.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Viterbit<\/a> es un ATS espa\u00f1ol \u2014un <i>Applicant Tracking System<\/i>, el software donde se organizan candidatos, ofertas y procesos\u2014 fundado en 2021 y parte de <a href=\"https:\/\/nosotros.infojobs.net\/infojobs-adquiere-la-solucion-tecnologica-de-contratacion-viterbit\/\" target=\"_blank\" rel=\"noopener nofollow\">InfoJobs<\/a> desde julio de 2026: organiza el proceso de selecci\u00f3n, pero no graba ni transcribe entrevistas. Voicit es la herramienta de inteligencia artificial que graba, transcribe y convierte cada entrevista en un informe estructurado de candidato. La integraci\u00f3n conecta las dos piezas \u2014<strong>Voicit documenta, Viterbit almacena<\/strong>\u2014 sin pasar por Zapier ni por archivos que haya que exportar e importar. A fecha de julio de 2026 es la \u00fanica herramienta de documentaci\u00f3n de entrevistas con integraci\u00f3n nativa con Viterbit.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details name=\"vl-faq\">\r\n          <summary>\u00bfC\u00f3mo creo la API Key de Viterbit para conectar Voicit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>En Viterbit, un administrador entra en Ajustes \u203a API Keys y pulsa \u00abNueva API Key\u00bb. Se le pone nombre (por ejemplo, VOICIT) y permisos de lectura y escritura en Candidatos y Candidaturas. La clave se copia en ese momento, porque no vuelve a mostrarse, y al pegarla en Voicit se almacena cifrada. Si la cuenta no tiene la API activa, el soporte de Viterbit la activa desde el chat. Tienes el detalle t\u00e9cnico en la <a href=\"https:\/\/viterbit.readme.io\/reference\/start\" target=\"_blank\" rel=\"noopener nofollow\">documentaci\u00f3n oficial de la API de Viterbit<\/a> y en su <a href=\"https:\/\/help.viterbit.com\/es\/collections\/9479216-api\" target=\"_blank\" rel=\"noopener nofollow\">centro de ayuda<\/a>.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfC\u00f3mo consigo que todas las entrevistas queden documentadas en el ATS?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Quitando el paso manual de redactar. Cuando documentar depende de que cada persona escriba sus notas despu\u00e9s de la entrevista, los procesos con prisa se quedan sin registro. Con Voicit el informe se genera autom\u00e1ticamente y guardarlo en Viterbit es un clic, as\u00ed que todos los candidatos entrevistados quedan documentados: avancen en el proceso o no.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfQu\u00e9 hago con los candidatos que entrevisto y no pasan a la final?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Documentarlos en el ATS en lugar de perderlos. Un candidato descartado por disponibilidad o por encaje puntual sigue siendo talento ya evaluado. Con su informe guardado en Viterbit puedes recuperarlo en un proceso futuro con todo su contexto \u2014competencias, motivaci\u00f3n, expectativas\u2014 en vez de empezar la b\u00fasqueda desde cero.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfSe puede grabar y transcribir una entrevista presencial o por tel\u00e9fono?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>S\u00ed. Voicit documenta entrevistas por videollamada (Google Meet, Microsoft Teams, Zoom), por tel\u00e9fono y presenciales. En los tres casos genera el mismo informe estructurado y el mismo bot\u00f3n \u00abGuardar en Viterbit\u00bb. La integraci\u00f3n no depende del canal por el que se haya hecho la entrevista.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfQu\u00e9 pasa con la privacidad y el RGPD al grabar las entrevistas?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Grabar una entrevista requiere informar al candidato y tener una base legal, igual que cualquier otro tratamiento de datos personales. Voicit es una empresa espa\u00f1ola y trata los datos conforme al RGPD; puedes consultar el detalle en la p\u00e1gina de <a href=\"https:\/\/voicit.com\/seguridad\/\">seguridad y protecci\u00f3n de datos<\/a>. Tambi\u00e9n tenemos una gu\u00eda sobre <a href=\"https:\/\/voicit.com\/blog\/recursos-humanos\/rgpd-grabar-entrevistas-reuniones\/5090\/\">grabar entrevistas cumpliendo el RGPD<\/a>.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfPierdo el chat y el an\u00e1lisis de Voicit al activar la integraci\u00f3n?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>No. El chat sobre la entrevista, el an\u00e1lisis de competencias, las plantillas y la transcripci\u00f3n completa siguen funcionando igual dentro de Voicit. La integraci\u00f3n solo a\u00f1ade una cosa: que el resultado quede tambi\u00e9n en la ficha del candidato en Viterbit. Sumas trazabilidad en el ATS sin perder nada de lo que ya usas.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfCu\u00e1nto cuesta la integraci\u00f3n de Voicit con Viterbit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>La integraci\u00f3n no tiene coste adicional, ni por parte de Voicit ni por parte de Viterbit. Lo que se paga es la licencia de Voicit, que va por usuario. El detalle de precio para tu caso concreto se ve en la demo, porque las condiciones para consultoras de selecci\u00f3n no son las de los <a href=\"https:\/\/voicit.com\/pricing\/\">planes publicados en la web<\/a>.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfLa compra de Viterbit por InfoJobs afecta a la integraci\u00f3n con Voicit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>En julio de 2026, InfoJobs <a href=\"https:\/\/nosotros.infojobs.net\/infojobs-adquiere-la-solucion-tecnologica-de-contratacion-viterbit\/\" target=\"_blank\" rel=\"noopener nofollow\">anunci\u00f3 la adquisici\u00f3n de Viterbit<\/a>. Seg\u00fan el comunicado, Viterbit mantiene marca, equipo y producto, y sus fundadores siguen al frente. La integraci\u00f3n de Voicit funciona sobre la API p\u00fablica de Viterbit, la misma que usan el resto de conexiones de la plataforma.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfC\u00f3mo conecto ChatGPT con Viterbit para guardar informes de candidatos?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>ChatGPT no se conecta con Viterbit: no graba entrevistas ni escribe en la ficha del candidato. Lo que s\u00ed existe es Voicit, que graba y transcribe la entrevista, redacta el informe con inteligencia artificial y lo guarda en Viterbit al pulsar \u00abGuardar en Viterbit\u00bb. La conexi\u00f3n se hace con una API Key, sin copiar ni pegar nada.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfC\u00f3mo paso las notas de una entrevista a Viterbit sin escribirlas a mano?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Dejando que las escriba Voicit. Graba la entrevista, la transcribe y redacta el informe con tu plantilla; despu\u00e9s, un clic en \u00abGuardar en Viterbit\u00bb lo vuelca en la ficha del candidato, localizado por su email. No hay que copiar, pegar ni reescribir nada dentro del ATS.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfSe puede transcribir una entrevista y que se guarde sola en el ATS?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>La transcripci\u00f3n y el informe s\u00ed se generan solos; el guardado en Viterbit lo confirmas t\u00fa con un clic. Es a prop\u00f3sito: as\u00ed revisas el informe antes de que quede en la ficha del candidato. Ese clic es el \u00fanico paso manual de todo el proceso.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfQu\u00e9 herramienta de IA se integra con Viterbit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>Voicit. A fecha de julio de 2026 es la \u00fanica herramienta de documentaci\u00f3n de entrevistas con integraci\u00f3n nativa con Viterbit: se conecta por API Key, sin intermediarios como Zapier. Graba y transcribe la entrevista, genera el informe de candidato y lo guarda en su ficha del ATS.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\u00bfEl candidato tiene que existir ya en Viterbit?<\/summary>\r\n          <div class=\"vl-faq-answer\">\r\n            <p>S\u00ed. Voicit localiza al candidato en tu cuenta de Viterbit por su email, que es el identificador \u00fanico. Encaja con el procedimiento habitual de cualquier consultora: el candidato se da de alta al entrar en el proceso. Si su CV se subi\u00f3 a Voicit, el email ya est\u00e1 detectado; si no, Voicit lo pide antes de guardar.<\/p>\r\n          <\/div>\r\n        <\/details>\r\n\r\n      <\/div>\r\n\r\n      <div style=\"text-align:center;margin-top:48px;\">\r\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;\">\r\n          M\u00e1s dudas aqu\u00ed\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- Enlaces internos -->\r\n      <div class=\"vl-colofon\">\r\n        <p class=\"text-small text-secondary\">\r\n          Ver tambi\u00e9n: <a href=\"https:\/\/voicit.com\/centro-de-ayuda\/integraciones\/\">resto de integraciones de Voicit<\/a> \u00b7 <a href=\"https:\/\/voicit.com\/recursos-humanos\/\">Voicit para equipos de selecci\u00f3n<\/a>\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     SCHEMA JSON-LD\r\n     SIN marcado de valoraci\u00f3n agregada a prop\u00f3sito: el 4,8\/+350 son rese\u00f1as de la Chrome Web Store,\r\n     no de esta p\u00e1gina. Marcarlo aqu\u00ed ser\u00eda una valoraci\u00f3n autorreferencial (patr\u00f3n que\r\n     Google sanciona). El dato vive en el texto visible del hero, con su fuente citada.\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"WebPage\",\r\n \"@id\": \"https:\/\/voicit.com\/integraciones\/viterbit\/#webpage\",\r\n \"name\": \"Integraci\u00f3n Voicit + Viterbit \u2014 Informes de entrevista en la ficha del candidato\",\r\n \"url\": \"https:\/\/voicit.com\/integraciones\/viterbit\/\",\r\n \"description\": \"Voicit genera el informe de cada entrevista y lo guarda en la ficha del candidato en Viterbit con un clic. Integraci\u00f3n nativa por API Key, sin coste adicional.\",\r\n \"inLanguage\": \"es\",\r\n \"datePublished\": \"2026-07-28\",\r\n \"dateModified\": \"2026-07-28\",\r\n \"isPartOf\": {\r\n  \"@id\": \"https:\/\/voicit.com\/#website\"\r\n },\r\n \"about\": [\r\n  {\r\n   \"@id\": \"https:\/\/voicit.com\/#software\"\r\n  },\r\n  {\r\n   \"@id\": \"https:\/\/viterbit.com\/#organization\"\r\n  }\r\n ],\r\n \"mentions\": [\r\n  {\r\n   \"@type\": \"SoftwareApplication\",\r\n   \"@id\": \"https:\/\/viterbit.com\/#organization\",\r\n   \"name\": \"Viterbit\",\r\n   \"applicationCategory\": \"BusinessApplication\",\r\n   \"applicationSubCategory\": \"Applicant Tracking System\",\r\n   \"operatingSystem\": \"Web\",\r\n   \"url\": \"https:\/\/viterbit.com\/\",\r\n   \"sameAs\": [\r\n    \"https:\/\/viterbit.com\/\",\r\n    \"https:\/\/help.viterbit.com\/\",\r\n    \"https:\/\/viterbit.readme.io\/reference\/start\"\r\n   ]\r\n  }\r\n ],\r\n \"publisher\": {\r\n  \"@id\": \"https:\/\/voicit.com\/#organization\"\r\n }\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"SoftwareApplication\",\r\n \"@id\": \"https:\/\/voicit.com\/#software\",\r\n \"name\": \"Voicit\",\r\n \"applicationCategory\": \"BusinessApplication\",\r\n \"applicationSubCategory\": \"Interview documentation and reporting\",\r\n \"operatingSystem\": \"Web, Chrome Extension\",\r\n \"url\": \"https:\/\/voicit.com\/\",\r\n \"description\": \"Voicit es una herramienta de inteligencia artificial que graba, transcribe y convierte cada entrevista de selecci\u00f3n en un informe estructurado de candidato, y lo env\u00eda a la ficha del candidato en el ATS con un clic.\",\r\n \"featureList\": [\r\n  \"Grabaci\u00f3n de entrevistas por videollamada, tel\u00e9fono y presenciales\",\r\n  \"Transcripci\u00f3n autom\u00e1tica\",\r\n  \"Generaci\u00f3n de informes de candidato con plantillas propias\",\r\n  \"Integraci\u00f3n nativa con Viterbit por API Key\",\r\n  \"Evaluaci\u00f3n de competencias\"\r\n ],\r\n \"provider\": {\r\n  \"@id\": \"https:\/\/voicit.com\/#organization\"\r\n },\r\n \"offers\": {\r\n  \"@type\": \"Offer\",\r\n  \"url\": \"https:\/\/voicit.com\/pricing\/\",\r\n  \"priceCurrency\": \"EUR\",\r\n  \"availability\": \"https:\/\/schema.org\/InStock\"\r\n }\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"Organization\",\r\n \"@id\": \"https:\/\/voicit.com\/#organization\",\r\n \"name\": \"Voicit\",\r\n \"url\": \"https:\/\/voicit.com\/\",\r\n \"logo\": \"https:\/\/voicit.com\/wp-content\/uploads\/2022\/09\/voicit_logo02.svg\",\r\n \"foundingDate\": \"2022-05-06\",\r\n \"vatID\": \"B10529246\",\r\n \"address\": {\r\n  \"@type\": \"PostalAddress\",\r\n  \"addressLocality\": \"Valencia\",\r\n  \"addressCountry\": \"ES\"\r\n },\r\n \"sameAs\": [\r\n  \"https:\/\/www.linkedin.com\/company\/voicit\/\",\r\n  \"https:\/\/chromewebstore.google.com\/detail\/voicit-resumen-reuni%C3%B3n-ia\/lekjojhflheocafafpmiiemdiechdnkm\"\r\n ]\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"BreadcrumbList\",\r\n \"itemListElement\": [\r\n  {\r\n   \"@type\": \"ListItem\",\r\n   \"position\": 1,\r\n   \"name\": \"Inicio\",\r\n   \"item\": \"https:\/\/voicit.com\/\"\r\n  },\r\n  {\r\n   \"@type\": \"ListItem\",\r\n   \"position\": 2,\r\n   \"name\": \"Integraciones\",\r\n   \"item\": \"https:\/\/voicit.com\/integraciones\/\"\r\n  },\r\n  {\r\n   \"@type\": \"ListItem\",\r\n   \"position\": 3,\r\n   \"name\": \"Viterbit\"\r\n  }\r\n ]\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"HowTo\",\r\n \"name\": \"C\u00f3mo conectar Voicit con Viterbit\",\r\n \"description\": \"Pasos para activar la integraci\u00f3n de Voicit con el ATS Viterbit mediante una API Key y empezar a guardar los informes de entrevista en la ficha del candidato.\",\r\n \"totalTime\": \"PT10M\",\r\n \"supply\": [\r\n  {\r\n   \"@type\": \"HowToSupply\",\r\n   \"name\": \"Cuenta de Viterbit con permisos de administrador\"\r\n  },\r\n  {\r\n   \"@type\": \"HowToSupply\",\r\n   \"name\": \"Cuenta de Voicit\"\r\n  }\r\n ],\r\n \"tool\": [\r\n  {\r\n   \"@type\": \"HowToTool\",\r\n   \"name\": \"API Key de Viterbit\"\r\n  }\r\n ],\r\n \"step\": [\r\n  {\r\n   \"@type\": \"HowToStep\",\r\n   \"position\": 1,\r\n   \"name\": \"Crea la API Key en Viterbit\",\r\n   \"text\": \"La genera un administrador de Viterbit en Ajustes, en el apartado API Keys: nueva clave con nombre VOICIT y permisos de lectura y escritura en Candidatos y Candidaturas. Si tu cuenta no tiene la API activa, el soporte de Viterbit la activa al momento desde el chat.\",\r\n   \"url\": \"https:\/\/voicit.com\/integraciones\/viterbit\/#conectar\"\r\n  },\r\n  {\r\n   \"@type\": \"HowToStep\",\r\n   \"position\": 2,\r\n   \"name\": \"P\u00e9gala en Voicit\",\r\n   \"text\": \"Introduce la API Key en Voicit y la integraci\u00f3n queda activada para toda tu cuenta. No hay nada que instalar.\",\r\n   \"url\": \"https:\/\/voicit.com\/integraciones\/viterbit\/#conectar\"\r\n  },\r\n  {\r\n   \"@type\": \"HowToStep\",\r\n   \"position\": 3,\r\n   \"name\": \"Guarda el informe con un clic\",\r\n   \"text\": \"A partir de ah\u00ed, al terminar cada entrevista revisas el informe y pulsas \u00abGuardar en Viterbit\u00bb: se vuelca a la ficha del candidato. No hay nada m\u00e1s que configurar.\",\r\n   \"url\": \"https:\/\/voicit.com\/integraciones\/viterbit\/#conectar\"\r\n  }\r\n ]\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"FAQPage\",\r\n \"mainEntity\": [\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfViterbit genera informes de entrevista autom\u00e1ticamente?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"No. Viterbit permite escribir un informe de candidato a mano desde la ficha, pero no genera el informe por s\u00ed solo ni transcribe la conversaci\u00f3n. Esa parte la hace Voicit: graba la entrevista, la transcribe y redacta el informe con tu plantilla. Despu\u00e9s, un clic lo guarda en Viterbit. Si te interesa el detalle, explicamos c\u00f3mo se genera un informe de entrevista con IA en una gu\u00eda aparte.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfC\u00f3mo se guardan los informes de entrevista en Viterbit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Conectando Voicit con Viterbit mediante una API Key. Voicit graba y transcribe la entrevista y genera el informe con tu plantilla; al pulsar \u00abGuardar en Viterbit\u00bb, rellena los campos de Voicit en la ficha del candidato \u2014localizado por su email\u2014, sin copiar ni pegar nada.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfViterbit transcribe las entrevistas?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"No. Viterbit es el ATS: organiza candidatos, ofertas y procesos de selecci\u00f3n. La grabaci\u00f3n, la transcripci\u00f3n y el an\u00e1lisis de la entrevista los hace Voicit, y el resultado acaba dentro de la ficha del candidato en Viterbit. Todo queda donde ya trabajas.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfQu\u00e9 es la integraci\u00f3n de Voicit con Viterbit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Es una conexi\u00f3n nativa por API Key que env\u00eda el informe de cada entrevista a la ficha del candidato en Viterbit. Viterbit es un ATS espa\u00f1ol \u2014un Applicant Tracking System, el software donde se organizan candidatos, ofertas y procesos\u2014 fundado en 2021 y parte de InfoJobs desde julio de 2026: organiza el proceso de selecci\u00f3n, pero no graba ni transcribe entrevistas. Voicit es la herramienta de inteligencia artificial que graba, transcribe y convierte cada entrevista en un informe estructurado de candidato. La integraci\u00f3n conecta las dos piezas \u2014Voicit documenta, Viterbit almacena\u2014 sin pasar por Zapier ni por archivos que haya que exportar e importar. A fecha de julio de 2026 es la \u00fanica herramienta de documentaci\u00f3n de entrevistas con integraci\u00f3n nativa con Viterbit.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfC\u00f3mo creo la API Key de Viterbit para conectar Voicit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"En Viterbit, un administrador entra en Ajustes \u203a API Keys y pulsa \u00abNueva API Key\u00bb. Se le pone nombre (por ejemplo, VOICIT) y permisos de lectura y escritura en Candidatos y Candidaturas. La clave se copia en ese momento, porque no vuelve a mostrarse, y al pegarla en Voicit se almacena cifrada. Si la cuenta no tiene la API activa, el soporte de Viterbit la activa desde el chat. Tienes el detalle t\u00e9cnico en la documentaci\u00f3n oficial de la API de Viterbit y en su centro de ayuda.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfC\u00f3mo consigo que todas las entrevistas queden documentadas en el ATS?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Quitando el paso manual de redactar. Cuando documentar depende de que cada persona escriba sus notas despu\u00e9s de la entrevista, los procesos con prisa se quedan sin registro. Con Voicit el informe se genera autom\u00e1ticamente y guardarlo en Viterbit es un clic, as\u00ed que todos los candidatos entrevistados quedan documentados: avancen en el proceso o no.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfQu\u00e9 hago con los candidatos que entrevisto y no pasan a la final?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Documentarlos en el ATS en lugar de perderlos. Un candidato descartado por disponibilidad o por encaje puntual sigue siendo talento ya evaluado. Con su informe guardado en Viterbit puedes recuperarlo en un proceso futuro con todo su contexto \u2014competencias, motivaci\u00f3n, expectativas\u2014 en vez de empezar la b\u00fasqueda desde cero.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfSe puede grabar y transcribir una entrevista presencial o por tel\u00e9fono?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"S\u00ed. Voicit documenta entrevistas por videollamada (Google Meet, Microsoft Teams, Zoom), por tel\u00e9fono y presenciales. En los tres casos genera el mismo informe estructurado y el mismo bot\u00f3n \u00abGuardar en Viterbit\u00bb. La integraci\u00f3n no depende del canal por el que se haya hecho la entrevista.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfQu\u00e9 pasa con la privacidad y el RGPD al grabar las entrevistas?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Grabar una entrevista requiere informar al candidato y tener una base legal, igual que cualquier otro tratamiento de datos personales. Voicit es una empresa espa\u00f1ola y trata los datos conforme al RGPD; puedes consultar el detalle en la p\u00e1gina de seguridad y protecci\u00f3n de datos. Tambi\u00e9n tenemos una gu\u00eda sobre grabar entrevistas cumpliendo el RGPD.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfPierdo el chat y el an\u00e1lisis de Voicit al activar la integraci\u00f3n?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"No. El chat sobre la entrevista, el an\u00e1lisis de competencias, las plantillas y la transcripci\u00f3n completa siguen funcionando igual dentro de Voicit. La integraci\u00f3n solo a\u00f1ade una cosa: que el resultado quede tambi\u00e9n en la ficha del candidato en Viterbit. Sumas trazabilidad en el ATS sin perder nada de lo que ya usas.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfCu\u00e1nto cuesta la integraci\u00f3n de Voicit con Viterbit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"La integraci\u00f3n no tiene coste adicional, ni por parte de Voicit ni por parte de Viterbit. Lo que se paga es la licencia de Voicit, que va por usuario. El detalle de precio para tu caso concreto se ve en la demo, porque las condiciones para consultoras de selecci\u00f3n no son las de los planes publicados en la web.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfLa compra de Viterbit por InfoJobs afecta a la integraci\u00f3n con Voicit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"En julio de 2026, InfoJobs anunci\u00f3 la adquisici\u00f3n de Viterbit. Seg\u00fan el comunicado, Viterbit mantiene marca, equipo y producto, y sus fundadores siguen al frente. La integraci\u00f3n de Voicit funciona sobre la API p\u00fablica de Viterbit, la misma que usan el resto de conexiones de la plataforma.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfC\u00f3mo conecto ChatGPT con Viterbit para guardar informes de candidatos?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"ChatGPT no se conecta con Viterbit: no graba entrevistas ni escribe en la ficha del candidato. Lo que s\u00ed existe es Voicit, que graba y transcribe la entrevista, redacta el informe con inteligencia artificial y lo guarda en Viterbit al pulsar \u00abGuardar en Viterbit\u00bb. La conexi\u00f3n se hace con una API Key, sin copiar ni pegar nada.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfC\u00f3mo paso las notas de una entrevista a Viterbit sin escribirlas a mano?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Dejando que las escriba Voicit. Graba la entrevista, la transcribe y redacta el informe con tu plantilla; despu\u00e9s, un clic en \u00abGuardar en Viterbit\u00bb lo vuelca en la ficha del candidato, localizado por su email. No hay que copiar, pegar ni reescribir nada dentro del ATS.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfSe puede transcribir una entrevista y que se guarde sola en el ATS?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"La transcripci\u00f3n y el informe s\u00ed se generan solos; el guardado en Viterbit lo confirmas t\u00fa con un clic. Es a prop\u00f3sito: as\u00ed revisas el informe antes de que quede en la ficha del candidato. Ese clic es el \u00fanico paso manual de todo el proceso.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfQu\u00e9 herramienta de IA se integra con Viterbit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"Voicit. A fecha de julio de 2026 es la \u00fanica herramienta de documentaci\u00f3n de entrevistas con integraci\u00f3n nativa con Viterbit: se conecta por API Key, sin intermediarios como Zapier. Graba y transcribe la entrevista, genera el informe de candidato y lo guarda en su ficha del ATS.\"\r\n   }\r\n  },\r\n  {\r\n   \"@type\": \"Question\",\r\n   \"name\": \"\u00bfEl candidato tiene que existir ya en Viterbit?\",\r\n   \"acceptedAnswer\": {\r\n    \"@type\": \"Answer\",\r\n    \"text\": \"S\u00ed. Voicit localiza al candidato en tu cuenta de Viterbit por su email, que es el identificador \u00fanico. Encaja con el procedimiento habitual de cualquier consultora: el candidato se da de alta al entrar en el proceso. Si su CV se subi\u00f3 a Voicit, el email ya est\u00e1 detectado; si no, Voicit lo pide antes de guardar.\"\r\n   }\r\n  }\r\n ]\r\n}\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     JavaScript \u2014 Scroll Animations\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function() {\r\n  'use strict';\r\n  \/\/ Textos generados por JS seg\u00fan idioma (TranslatePress cambia el atributo lang del documento pero NO traduce JS).\r\n  \/\/ Expuesto en window.VLI18N para que lo usen tambi\u00e9n los dem\u00e1s m\u00f3dulos (bot\u00f3n del hero, formulario).\r\n  var VLI18N = (function(){\r\n    var d = {\r\n      es:{saving:'Guardando\u2026',saved:'Guardado en Viterbit'},\r\n      en:{saving:'Saving\u2026',saved:'Saved to Viterbit'},\r\n      fr:{saving:'Enregistrement\u2026',saved:'Enregistr\u00e9 dans Viterbit'},\r\n      de:{saving:'Wird gespeichert\u2026',saved:'In Viterbit gespeichert'},\r\n      it:{saving:'Salvataggio\u2026',saved:'Salvato in Viterbit'},\r\n      pt:{saving:'A guardar\u2026',saved:'Guardado no Viterbit'},\r\n      ca:{saving:'Desant\u2026',saved:'Desat a Viterbit'}\r\n    };\r\n    var l = (document.documentElement.lang||'es').slice(0,2).toLowerCase();\r\n    return d[l] || d.es;\r\n  })();\r\n  window.VLI18N = VLI18N;\r\n\r\n  \/\/ Intersection Observer para reveal on scroll\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('is-visible');\r\n        observer.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, {\r\n    threshold: 0.1,\r\n    rootMargin: '0px 0px -50px 0px'\r\n  });\r\n\r\n  \/\/ Observar todos los elementos .vl-reveal EXCEPTO los mockups\r\n  document.querySelectorAll('.vl-reveal:not(.vl-mk-rec):not(.vl-vm-card):not(.vl-mk-editor):not(.vl-vbcard)').forEach(el => {\r\n    observer.observe(el);\r\n  });\r\n\r\n  \/\/ Observador espec\u00edfico para mockups con trigger m\u00e1s estricto\r\n  \/\/ (solo dispara cuando el mockup est\u00e1 bien dentro del viewport)\r\n  const mockupObserver = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('is-visible');\r\n        mockupObserver.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, {\r\n    threshold: 0.45,\r\n    rootMargin: '0px 0px -15% 0px'\r\n  });\r\n  document.querySelectorAll('.vl-mk-rec, .vl-mk-editor, .vl-vbcard--full').forEach(el => {\r\n    mockupObserver.observe(el);\r\n  });\r\n\r\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n  \/\/ MOCKUP PASO 2 \u2014 \"Guardar en Viterbit\" (toast + auto-avance al Paso 3)\r\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n\r\n  \/\/ Auto-scroll a un paso concreto dentro del scroll congelado de la secci\u00f3n \"3 pasos\"\r\n  function vlGoToStep(idx, delay) {\r\n    var track = document.querySelector('.vl-ssteps-track');\r\n    if (!track) return;\r\n    var nSteps = document.querySelectorAll('.vl-sstep').length || 3;\r\n    setTimeout(function () {\r\n      var absTop = track.getBoundingClientRect().top + window.scrollY;\r\n      var scrollable = track.offsetHeight - window.innerHeight;\r\n      if (0 >= scrollable) return;\r\n      var target = absTop + scrollable * ((idx + 0.5) \/ nSteps);\r\n      window.scrollTo({ top: Math.round(target), behavior: 'smooth' });\r\n    }, delay || 0);\r\n  }\r\n\r\n  document.addEventListener('click', (e) => {\r\n    \/\/ Click en \"Guardar en Viterbit\" \u2192 toast + avance al Paso 3\r\n    const saveBtn = e.target.closest('[data-vl-save]');\r\n    if (saveBtn) {\r\n      const editor = saveBtn.closest('.vl-mk-editor');\r\n      const toast = editor ? editor.querySelector('.vl-mk-editor-toast') : null;\r\n      if (toast) {\r\n        toast.classList.remove('is-hiding');\r\n        toast.classList.remove('is-showing');\r\n        void toast.offsetWidth;\r\n        toast.classList.add('is-showing');\r\n\r\n        clearTimeout(toast._hideTimer);\r\n        toast._hideTimer = setTimeout(() => {\r\n          toast.classList.remove('is-showing');\r\n          toast.classList.add('is-hiding');\r\n        }, 2200);\r\n      }\r\n      \/\/ Auto-avance al Paso 3 (la ficha en Viterbit) tras guardar\r\n      vlGoToStep(2, 800);\r\n      return;\r\n    }\r\n  });\r\n\r\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n  \/\/ TESTIMONIOS \u2014 Sticky stack scroll\r\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n  (function () {\r\n    const section = document.querySelector('.vl-tstack-section');\r\n    if (!section) return;\r\n    const track = section.querySelector('.vl-tstack-track');\r\n    const cards = section.querySelectorAll('.vl-tstack-card');\r\n    if (!track || cards.length === 0) return;\r\n\r\n    function updateStack() {\r\n      \/\/ M\u00f3vil\/tablet: sin scroll fijado (las rese\u00f1as van en flujo normal, lo gestiona el CSS)\r\n      if (window.matchMedia('(max-width: 1024px)').matches) return;\r\n      const rect = track.getBoundingClientRect();\r\n      const trackHeight = track.offsetHeight - window.innerHeight;\r\n      if (trackHeight <= 0) return;\r\n      let progress = Math.max(0, Math.min(1, -rect.top \/ trackHeight));\r\n\r\n      const N = cards.length;\r\n      const SEG = Math.max(1, N - 1);          \/\/ n\u00ba de transiciones (una por card que entra)\r\n      const pos = progress * SEG;              \/\/ 0..N-1\r\n      const baseIdx = Math.min(N - 1, Math.floor(pos));   \/\/ card ya asentada arriba\r\n      const local = pos - baseIdx;             \/\/ 0..1 dentro de la transici\u00f3n actual\r\n      const incomingIdx = baseIdx + 1;         \/\/ card que se est\u00e1 acercando (puede no existir)\r\n      const SNAP = 0.82;                       \/\/ a partir de aqu\u00ed se coloca encima (m\u00e1s r\u00e1pido)\r\n\r\n      cards.forEach((card, idx) => {\r\n        \/\/ Reset: las clases gestionan las asentadas; la entrante usa transform inline (sigue al scroll)\r\n        card.style.transform = '';\r\n        card.style.transition = '';\r\n        card.classList.remove('is-behind-1', 'is-behind-2', 'is-behind-3');\r\n\r\n        if (idx <= baseIdx) {\r\n          \/\/ Cards ya colocadas (la de arriba + las del fondo apiladas)\r\n          card.classList.add('is-visible');\r\n          const depth = baseIdx - idx;\r\n          if (depth === 1) card.classList.add('is-behind-1');\r\n          else if (depth === 2) card.classList.add('is-behind-2');\r\n          else if (depth >= 3) card.classList.add('is-behind-3');\r\n        } else if (idx === incomingIdx) {\r\n          \/\/ Card ENTRANTE: se acerca poco a poco con cada input de scroll\u2026\r\n          card.classList.remove('is-visible');\r\n          if (local < SNAP) {\r\n            const t = local \/ SNAP;                          \/\/ 0..1\r\n            const ty = 120 - t * (120 - 12);                 \/\/ 120vh \u2192 12vh (se va asomando por abajo)\r\n            const sc = 0.94 + t * 0.045;                     \/\/ 0.940 \u2192 0.985\r\n            card.style.transition = 'transform 0.14s linear';\r\n            card.style.transform = 'translateY(' + ty.toFixed(2) + 'vh) scale(' + sc.toFixed(3) + ')';\r\n          } else {\r\n            \/\/ \u2026y en el \u00faltimo tramo se coloca ENCIMA con una animaci\u00f3n algo m\u00e1s r\u00e1pida\r\n            card.style.transition = 'transform 0.42s cubic-bezier(0.22, 1, 0.36, 1)';\r\n            card.style.transform = 'translateY(0) scale(1)';\r\n          }\r\n        } else {\r\n          card.classList.remove('is-visible');\r\n        }\r\n      });\r\n    }\r\n\r\n    \/\/ RAF throttle para suavidad\r\n    let ticking = false;\r\n    function onScroll() {\r\n      if (!ticking) {\r\n        requestAnimationFrame(() => { updateStack(); ticking = false; });\r\n        ticking = true;\r\n      }\r\n    }\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n    window.addEventListener('resize', onScroll);\r\n    \/\/ Estado inicial: la primera card visible al menos\r\n    updateStack();\r\n    \/\/ Aseguramos que la primera siempre est\u00e1 visible (estado base)\r\n    cards[0].classList.add('is-visible');\r\n  })();\r\n\r\n\r\n  \/\/ Smooth scroll para anclas internas\r\n  document.querySelectorAll('.vl-landing a[href^=\"#\"]').forEach(anchor => {\r\n    anchor.addEventListener('click', function(e) {\r\n      e.preventDefault();\r\n      const target = document.querySelector(this.getAttribute('href'));\r\n      if (target) {\r\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n      }\r\n    });\r\n  });\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     SCROLL CONGELADO DE LOS 3 PASOS \u2014 control por scroll\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function(){\r\n  'use strict';\r\n  \/\/ \u2500\u2500 Hero: bot\u00f3n \"Guardar en Viterbit\" \u2192 \"Guardando\u2026\" \u2192 \"\u2713 Guardado en Viterbit\" \u2500\u2500\r\n  \/\/ Textos desde window.VLI18N (7 idiomas), definido en el script principal.\r\n  var T = window.VLI18N || { saving: 'Guardando\u2026', saved: 'Guardado en Viterbit' };\r\n  var gen = document.querySelector('[data-vl-gen]');\r\n  if (gen) {\r\n    gen.addEventListener('click', function(){\r\n      if (gen.classList.contains('is-done') || gen.classList.contains('is-generating')) return;\r\n      gen.classList.add('is-generating');\r\n      gen.textContent = T.saving;\r\n      setTimeout(function(){\r\n        gen.classList.remove('is-generating');\r\n        gen.classList.add('is-done');\r\n        gen.innerHTML = '<span class=\"vl-gen-tick\">\u2713<\/span> ' + T.saved;\r\n      }, 750);\r\n    });\r\n  }\r\n})();\r\n<\/script>\r\n\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function () {\r\n  'use strict';\r\n  var track = document.querySelector('.vl-ssteps-track');\r\n  if (!track) return;\r\n  var steps = [].slice.call(document.querySelectorAll('.vl-sstep'));\r\n  var dots  = [].slice.call(document.querySelectorAll('[data-sstep-dot]'));\r\n  if (!steps.length) return;\r\n\r\n  var seen = {};       \/\/ mockups cuya animaci\u00f3n ya se dispar\u00f3\r\n  var current = -1;\r\n  var dtitle = document.querySelector('.vl-ssteps-dtitle');\r\n  var progress = document.querySelector('.vl-ssteps-progress');\r\n\r\n  function isMobile(){ return window.matchMedia('(max-width: 900px)').matches; }\r\n\r\n  \/\/ El t\u00edtulo (y las barritas de progreso) arrancan transparentes y se revelan con un fundido + ligero ascenso\r\n  \/\/ NADA M\u00c1S entrar el bloque por la parte baja: alcanzan el 100% mucho antes de que la secci\u00f3n quede fija.\r\n  function revealTitle(rectTop){\r\n    if (!dtitle) return;\r\n    if (window.matchMedia('(max-width: 1024px)').matches) {\r\n      dtitle.style.opacity = ''; dtitle.style.transform = '';\r\n      if (progress) { progress.style.opacity = ''; progress.style.transform = ''; }\r\n      return;\r\n    }\r\n    var vh = window.innerHeight || 800;\r\n    var start = vh * 0.88;                 \/\/ empieza a revelarse al asomar por abajo\r\n    var end   = vh * 0.60;                 \/\/ 100% visible mucho antes de fijarse arriba\r\n    var o = (start - rectTop) \/ (start - end);\r\n    o = Math.max(0, Math.min(1, o));\r\n    var ty = ((1 - o) * 10).toFixed(1);\r\n    dtitle.style.opacity = o.toFixed(3);\r\n    dtitle.style.transform = 'translateY(' + ty + 'px)';\r\n    if (progress) { progress.style.opacity = o.toFixed(3); progress.style.transform = 'translateY(' + ty + 'px)'; }\r\n  }\r\n\r\n  function fireMockup(i){\r\n    var m = steps[i] && steps[i].querySelector('.vl-mk-rec, .vl-vm-card, .vl-mk-editor, .vl-vbcard--full');\r\n    if (m && !seen[i]) { seen[i] = true; m.classList.add('is-visible'); }\r\n  }\r\n\r\n  function isStacked(){ return window.matchMedia('(max-width: 1024px)').matches || window.matchMedia('(hover: none) and (pointer: coarse)').matches; }\r\n  \/\/ M\u00f3vil\/tablet: todos los pasos visibles, apilados (sin scroll fijado)\r\n  function applyStacked(){\r\n    for (var s = 0; s < steps.length; s++){ steps[s].classList.add('is-active'); fireMockup(s); }\r\n  }\r\n\r\n  function activate(i){\r\n    if (i === current) return;\r\n    current = i;\r\n    for (var s = 0; s < steps.length; s++) steps[s].classList.toggle('is-active', s === i);\r\n    for (var d = 0; d < dots.length; d++) dots[d].classList.toggle('is-active', d === i);\r\n    fireMockup(i);\r\n  }\r\n\r\n  function onScroll(){\r\n    if (isStacked()) { applyStacked(); return; }   \/\/ m\u00f3vil: sin scroll-jack, todo apilado y visible\r\n    var rect = track.getBoundingClientRect();\r\n    var scrollable = track.offsetHeight - window.innerHeight;\r\n    if (scrollable <= 0) return;\r\n    var prog = (-rect.top) \/ scrollable;          \/\/ 0 al entrar, 1 al salir\r\n    prog = Math.max(0, Math.min(0.9999, prog));\r\n    var pos = prog * steps.length;                \/\/ 0..nSteps\r\n    var curr = Math.floor(pos);\r\n    var local = pos - curr;                       \/\/ 0..1 dentro del paso actual\r\n    activate(curr);\r\n    \/\/ Feedback continuo: la barra del paso actual se rellena seg\u00fan el scroll; las anteriores quedan llenas\r\n    for (var k = 0; k < dots.length; k++) {\r\n      var fill = (k < curr) ? 1 : (k === curr ? local : 0);\r\n      dots[k].style.setProperty('--fill', fill.toFixed(3));\r\n    }\r\n    revealTitle(rect.top);\r\n  }\r\n\r\n  if (isStacked()) applyStacked(); else activate(0);\r\n\r\n  \/\/ Barras de progreso clicables \u2192 llevan a su paso\r\n  dots.forEach(function (dot, i) {\r\n    dot.addEventListener('click', function () {\r\n      var absTop = track.getBoundingClientRect().top + window.scrollY;\r\n      var scrollable = track.offsetHeight - window.innerHeight;\r\n      if (scrollable <= 0) return;\r\n      var target = absTop + scrollable * ((i + 0.5) \/ steps.length);\r\n      window.scrollTo({ top: Math.round(target), behavior: 'smooth' });\r\n    });\r\n  });\r\n\r\n  var ticking = false;\r\n  window.addEventListener('scroll', function () {\r\n    if (!ticking) { requestAnimationFrame(function () { onScroll(); ticking = false; }); ticking = true; }\r\n  }, { passive: true });\r\n  window.addEventListener('resize', function () { current = -1; onScroll(); });\r\n  onScroll();\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     COMPARATIVA \"Antes \/ Ahora\" \u2014 revelado natural al entrar en pantalla (sin scroll fijado)\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function () {\r\n  'use strict';\r\n  var section = document.querySelector('.vl-cmp-section');\r\n  if (!section) return;\r\n  var track = section.querySelector('.vl-cmp-track');\r\n  var arrowPath = section.querySelector('.vl-compare-arrow svg path');\r\n  var afterCard = section.querySelector('.vl-compare-card--after');\r\n  var items = [].slice.call(section.querySelectorAll('.vl-compare-card--after .vl-compare-list li'));\r\n  var mq = window.matchMedia('(max-width: 1024px)');\r\n  function rng(p, a, b){ return Math.max(0, Math.min(1, (p - a) \/ (b - a))); }\r\n\r\n  function clearInline(){\r\n    if (arrowPath) arrowPath.style.strokeDashoffset = '';\r\n    if (afterCard) { afterCard.style.opacity = ''; afterCard.style.transform = ''; }\r\n    items.forEach(function (it){ it.style.opacity = ''; it.style.transform = ''; });\r\n  }\r\n  function revealInline(){\r\n    if (arrowPath) arrowPath.style.strokeDashoffset = '0';\r\n    if (afterCard) { afterCard.style.opacity = '1'; afterCard.style.transform = 'none'; }\r\n    items.forEach(function (it){ it.style.opacity = '1'; it.style.transform = 'none'; });\r\n  }\r\n\r\n  \/\/ ESCRITORIO: animaci\u00f3n dirigida por el scroll fijado (estilos inline).\r\n  function update(){\r\n    if (mq.matches || !track) return;   \/\/ m\u00f3vil \u2192 lo gestiona el revelado por IO\r\n    try {\r\n      var rect = track.getBoundingClientRect();\r\n      var scrollable = track.offsetHeight - window.innerHeight;\r\n      if (scrollable <= 0) { revealInline(); return; }\r\n      var p = Math.max(0, Math.min(1, (-rect.top) \/ scrollable));\r\n      if (arrowPath) arrowPath.style.strokeDashoffset = (1 - rng(p, 0.10, 0.40)).toFixed(3);\r\n      if (afterCard) {\r\n        var ca = rng(p, 0.32, 0.54);\r\n        afterCard.style.opacity = ca.toFixed(3);\r\n        afterCard.style.transform = 'translateX(' + ((1 - ca) * -42).toFixed(1) + 'px)';\r\n      }\r\n      var starts = [0.56, 0.70, 0.84];\r\n      for (var i = 0; i < items.length; i++){\r\n        var s = starts[i] != null ? starts[i] : (0.56 + i * 0.14);\r\n        var f = rng(p, s, s + 0.13);\r\n        items[i].style.opacity = f.toFixed(3);\r\n        items[i].style.transform = 'translateY(' + ((1 - f) * 9).toFixed(1) + 'px)';\r\n      }\r\n    } catch (e) { revealInline(); }\r\n  }\r\n\r\n  \/\/ M\u00d3VIL: revelado natural al entrar en pantalla (clases CSS + transiciones).\r\n  var ioStarted = false;\r\n  function startIO(){\r\n    if (ioStarted) return; ioStarted = true;\r\n    var fire = function(){ section.classList.add('is-live'); };\r\n    if ('IntersectionObserver' in window) {\r\n      var io = new IntersectionObserver(function (es) {\r\n        es.forEach(function (en) { if (en.isIntersecting) { fire(); io.disconnect(); } });\r\n      }, { threshold: 0.25 });\r\n      io.observe(section);\r\n    } else { fire(); }\r\n    setTimeout(fire, 12000);   \/\/ red de seguridad\r\n  }\r\n\r\n  function setMode(){\r\n    if (mq.matches) {                 \/\/ m\u00f3vil: revelado por IO + CSS\r\n      clearInline();\r\n      section.classList.add('vl-cmp-prep');\r\n      startIO();\r\n    } else {                          \/\/ escritorio: scroll fijado\r\n      section.classList.remove('vl-cmp-prep', 'is-live');\r\n      update();\r\n    }\r\n  }\r\n\r\n  window.addEventListener('scroll', update, { passive: true });\r\n  window.addEventListener('resize', setMode, { passive: true });\r\n  if (mq.addEventListener) mq.addEventListener('change', setMode);\r\n  setMode();\r\n  \/\/ Red de seguridad para escritorio: mantiene la sincron\u00eda aunque fallen los eventos de scroll.\r\n  var ticks = 0, iv = setInterval(function(){ if (!mq.matches) update(); if (++ticks > 120) clearInterval(iv); }, 250);\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CASOS DE USO \u2014 CONSTELACI\u00d3N: salida desde el centro al hacer scroll\r\n     + flotaci\u00f3n continua de los nodos con las l\u00edneas sigui\u00e9ndolos\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n\/* Puntos de fondo que se iluminan alrededor del cursor (hero, pain, casos de uso) \u2014 independiente *\/\r\n(function () {\r\n  'use strict';\r\n  if (window.matchMedia('(hover: none)').matches) return;\r\n  [].slice.call(document.querySelectorAll('.vl-dots')).forEach(function (sec) {\r\n    sec.addEventListener('pointermove', function (e) {\r\n      var r = sec.getBoundingClientRect();\r\n      sec.style.setProperty('--cx', (e.clientX - r.left) + 'px');\r\n      sec.style.setProperty('--cy', (e.clientY - r.top) + 'px');\r\n      sec.classList.add('is-lit');\r\n    }, { passive: true });\r\n    sec.addEventListener('pointerleave', function () { sec.classList.remove('is-lit'); });\r\n  });\r\n})();\r\n\/* Mensaje de la tira (chevrons Y fichas vl-segflow): aparece SOLO al pasar el rat\u00f3n, justo\r\n   debajo de la etapa\/ficha enfocada y alineado con ella en X. La descripci\u00f3n vive en un\r\n   span hijo (traducible por TranslatePress) \u2014 NUNCA en data-* (no se traducir\u00eda). *\/\r\n(function () {\r\n  'use strict';\r\n  function setup(flowSel, itemSel, descSel, capId) {\r\n    var cap = document.getElementById(capId);\r\n    var flow = document.querySelector(flowSel);\r\n    if (!cap || !flow) return;\r\n    var items = [].slice.call(flow.querySelectorAll(itemSel));\r\n    function isStacked() { return 1024 >= window.innerWidth; }\r\n    function focus(ch) {\r\n      items.forEach(function (c) { c.classList.toggle('vl-on', c === ch); });\r\n      flow.classList.add('vl-has-focus');\r\n      var d = ch.querySelector(descSel);\r\n      cap.textContent = d ? d.textContent : '';\r\n      if (isStacked()) { cap.style.left = ''; cap.classList.add('is-on'); return; }\r\n      var fw = flow.clientWidth;\r\n      var cw = cap.offsetWidth;\r\n      var center = ch.offsetLeft + ch.offsetWidth \/ 2;\r\n      var left = Math.max(0, Math.min(center - cw \/ 2, fw - cw));\r\n      cap.style.left = left + 'px';\r\n      cap.classList.add('is-on');\r\n    }\r\n    function clear() {\r\n      items.forEach(function (c) { c.classList.remove('vl-on'); });\r\n      flow.classList.remove('vl-has-focus');\r\n      cap.classList.remove('is-on');\r\n    }\r\n    items.forEach(function (ch) {\r\n      ch.addEventListener('pointerenter', function () { focus(ch); });\r\n    });\r\n    flow.addEventListener('pointerleave', clear);\r\n  }\r\n  setup('.vl-chevflow', '.vl-chev', '.vl-chev-desc', 'vl-chev-cap');\r\n  setup('.vl-segflow', '.vl-seg', '.vl-seg-desc', 'vl-seg-cap');\r\n})();\r\n(function () {\r\n  'use strict';\r\n  var cst = document.querySelector('.vl-constellation');\r\n  if (!cst) return;\r\n  var svg = cst.querySelector('.vl-cst-svg');\r\n  var nodes = [].slice.call(cst.querySelectorAll('.vl-cst-node'));\r\n  if (!svg || nodes.length < 2) return;\r\n  var SVGNS = 'http:\/\/www.w3.org\/2000\/svg';\r\n  var edges = [[0,1],[1,2],[2,3],[3,4],[4,5],[5,0],[1,4],[0,3]];\r\n  var lines = [];\r\n  \/\/ fase de flotaci\u00f3n distinta por nodo \u2192 movimiento org\u00e1nico\r\n  var phase = nodes.map(function (_, i) { return i * 1.9; });\r\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  function isMobile(){ return window.matchMedia('(max-width: 1024px)').matches; }\r\n\r\n  function buildLines(){\r\n    while (svg.firstChild) svg.removeChild(svg.firstChild);\r\n    lines = [];\r\n    if (isMobile()) return;\r\n    var r = cst.getBoundingClientRect();\r\n    svg.setAttribute('viewBox', '0 0 ' + r.width + ' ' + r.height);\r\n    edges.forEach(function () {\r\n      var ln = document.createElementNS(SVGNS, 'line');\r\n      ln.setAttribute('class', 'vl-cst-line');\r\n      svg.appendChild(ln);\r\n      lines.push(ln);\r\n    });\r\n  }\r\n\r\n  function dotCenter(n, r){\r\n    var d = n.querySelector('.vl-cst-dot').getBoundingClientRect();\r\n    return { x: d.left - r.left + d.width \/ 2, y: d.top - r.top + d.height \/ 2 };\r\n  }\r\n\r\n  function updateLines(){\r\n    if (isMobile() || !lines.length) return;\r\n    var r = cst.getBoundingClientRect();\r\n    edges.forEach(function (e, k) {\r\n      var a = dotCenter(nodes[e[0]], r), b = dotCenter(nodes[e[1]], r);\r\n      var ln = lines[k];\r\n      ln.setAttribute('x1', a.x); ln.setAttribute('y1', a.y);\r\n      ln.setAttribute('x2', b.x); ln.setAttribute('y2', b.y);\r\n    });\r\n  }\r\n\r\n  var running = false, rafId = null, t0 = null;\r\n\r\n  function frame(ts){\r\n    if (!running) return;\r\n    if (t0 == null) t0 = ts;\r\n    var time = (ts - t0) \/ 1000;\r\n    var r = cst.getBoundingClientRect();\r\n    var vh = window.innerHeight || 800;\r\n    \/\/ progreso de scroll: 0 al entrar por abajo \u2192 1 cuando la secci\u00f3n sube ~60% del viewport\r\n    var prog = (vh - r.top) \/ (vh * 0.6);\r\n    prog = Math.max(0, Math.min(1, prog));\r\n    var eased = 1 - Math.pow(1 - prog, 3);   \/\/ easeOutCubic\r\n    var cx = r.width \/ 2, cy = r.height \/ 2;\r\n    for (var i = 0; i < nodes.length; i++) {\r\n      var n = nodes[i];\r\n      var fx = parseFloat(n.style.getPropertyValue('--x')) \/ 100 * r.width;\r\n      var fy = parseFloat(n.style.getPropertyValue('--y')) \/ 100 * r.height;\r\n      \/\/ del centro (prog 0) a su posici\u00f3n final (prog 1)\r\n      var px = cx + (fx - cx) * eased;\r\n      var py = cy + (fy - cy) * eased;\r\n      \/\/ flotaci\u00f3n sutil y continua\r\n      var amp = 6;\r\n      var dx = Math.sin(time * 0.55 + phase[i]) * amp;\r\n      var dy = Math.cos(time * 0.47 + phase[i] * 1.3) * amp;\r\n      var s = 0.62 + 0.38 * eased;\r\n      var tx = (px - fx) + dx;\r\n      var ty = (py - fy) + dy;\r\n      n.style.transform = 'translate(-50%,-50%) translate(' + tx.toFixed(1) + 'px,' + ty.toFixed(1) + 'px) scale(' + s.toFixed(3) + ')';\r\n    }\r\n    updateLines();\r\n    rafId = requestAnimationFrame(frame);\r\n  }\r\n\r\n  function start(){\r\n    if (running || isMobile()) return;\r\n    running = true; t0 = null;\r\n    rafId = requestAnimationFrame(frame);\r\n  }\r\n  function stop(){ running = false; if (rafId) cancelAnimationFrame(rafId); rafId = null; }\r\n\r\n  function settleStatic(){\r\n    \/\/ reduced-motion o sin animaci\u00f3n: nodos en su sitio y l\u00edneas una vez\r\n    nodes.forEach(function (n) { n.style.transform = 'translate(-50%,-50%) scale(1)'; });\r\n    buildLines();\r\n    requestAnimationFrame(updateLines);\r\n  }\r\n\r\n  buildLines();\r\n\r\n  var io = new IntersectionObserver(function (entries) {\r\n    entries.forEach(function (en) {\r\n      if (en.isIntersecting) {\r\n        cst.classList.add('is-drawn');\r\n        if (reduce || isMobile()) { settleStatic(); }\r\n        else { start(); }\r\n      } else {\r\n        stop();\r\n      }\r\n    });\r\n  }, { threshold: 0.05 });\r\n  io.observe(cst);\r\n\r\n  var rt;\r\n  window.addEventListener('resize', function () {\r\n    clearTimeout(rt);\r\n    rt = setTimeout(function () {\r\n      stop();\r\n      if (isMobile()) {\r\n        nodes.forEach(function (n) { n.style.transform = ''; });   \/\/ que mande el CSS de m\u00f3vil\r\n        buildLines();\r\n      } else {\r\n        buildLines();\r\n        if (cst.classList.contains('is-drawn')) {\r\n          if (reduce) settleStatic(); else start();\r\n        }\r\n      }\r\n    }, 200);\r\n  }, { passive: true });\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CTA FINAL \u2014 la p\u00edldora \"se asienta\" (de un poco m\u00e1s grande a su tama\u00f1o)\r\n     seg\u00fan se acerca al centro del viewport al hacer scroll\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<!-- El CTA \"Comenzar gratis\" del header m\u00f3vil ahora es GLOBAL (Code Snippets id 25), ya no se inyecta por landing. -->\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     ORBE animado del Hero (sustituye al engranaje) \u2014 canvas ligero, en bucle\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function(){\r\n  'use strict';\r\n  var SIZE = 72, K = SIZE \/ 640;\r\n\r\n  function initOrb(wrap){\r\n  var mainC = wrap.querySelector('[data-orb-main]');\r\n  var glowC = wrap.querySelector('[data-orb-glow]');\r\n  if (!mainC || !glowC || !mainC.getContext) return;\r\n  var mouse = { x:0, y:0, influence:0 }, sm = { x:0, y:0, influence:0 };\r\n\r\n  document.addEventListener('mousemove', function(e){\r\n    var rect = wrap.getBoundingClientRect();\r\n    var cx = rect.left + rect.width\/2, cy = rect.top + rect.height\/2;\r\n    var scale = SIZE \/ (rect.width || 22);\r\n    mouse.x = (e.clientX - cx) * scale;\r\n    mouse.y = (e.clientY - cy) * scale;\r\n    var dist = Math.sqrt((e.clientX-cx)*(e.clientX-cx) + (e.clientY-cy)*(e.clientY-cy));\r\n    mouse.influence = Math.max(0, 1 - dist\/40);   \/\/ solo reacciona si el rat\u00f3n est\u00e1 MUY cerca del orbe (~40px)\r\n  }, { passive: true });\r\n  document.addEventListener('mouseleave', function(){ mouse.influence = 0; });\r\n\r\n  function Orb(canvas){\r\n    this.ctx = canvas.getContext('2d');\r\n    canvas.width = SIZE; canvas.height = SIZE;\r\n    this.center = SIZE\/2; this.radius = SIZE\/2; this.time = 0;\r\n    this.blobs = [\r\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 },\r\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 },\r\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 },\r\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 },\r\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 }\r\n    ];\r\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; }\r\n  }\r\n  Orb.prototype.update = function(dt, mi){\r\n    this.time += dt;\r\n    \/\/ Los colores se mueven por la SUPERFICIE de la esfera (3D real):\r\n    \/\/ cada mancha vive en la esfera (longitud que rota + latitud que oscila) y se\r\n    \/\/ proyecta a 2D. La profundidad (z) modula su tama\u00f1o y opacidad \u2192 la cara\r\n    \/\/ oculta se aten\u00faa y la frontal brilla, como una esfera girando.\r\n    \/\/ El rat\u00f3n cerca solo ACELERA el giro (nada se desplaza en X\/Y).\r\n    this.spin = (this.spin || 0) + dt * (0.25 + mi.influence * 2.2);\r\n    var R = this.radius * 0.62;                                  \/\/ radio de la esfera interior\r\n    for (var i=0;i<this.blobs.length;i++){\r\n      var b=this.blobs[i], t=this.time;\r\n      var th = b.px + t * b.sx * 0.35 + this.spin;               \/\/ longitud (gira)\r\n      var ph = b.py + Math.sin(t * b.sy * 0.45 + b.px) * 0.9;    \/\/ latitud (oscila)\r\n      var sp = Math.sin(ph), cp = Math.cos(ph);\r\n      var x = Math.cos(th) * sp, y = cp, z = Math.sin(th) * sp;  \/\/ punto sobre la esfera unidad\r\n      var depth = (z + 1) \/ 2;                                    \/\/ 0 = detr\u00e1s, 1 = de frente\r\n      b.x = this.center + x * R;\r\n      b.y = this.center + y * R;\r\n      b.r = b.baseR * (0.55 + 0.5 * depth);\r\n      b.alpha = 0.30 + 0.70 * depth;\r\n    }\r\n  };\r\n  Orb.prototype.render = function(){\r\n    var ctx=this.ctx, s=SIZE;\r\n    ctx.clearRect(0,0,s,s);\r\n    ctx.save();\r\n    ctx.beginPath(); ctx.arc(this.center,this.center,this.radius,0,Math.PI*2); ctx.clip();\r\n    ctx.fillStyle='#FDFFE8'; ctx.fillRect(0,0,s,s);\r\n    for (var i=0;i<this.blobs.length;i++){\r\n      var b=this.blobs[i], c=b.color, a=b.opacity * (b.alpha == null ? 1 : b.alpha);\r\n      var grad=ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,Math.max(0.1,b.r));\r\n      grad.addColorStop(0,    'rgba('+c[0]+','+c[1]+','+c[2]+','+a+')');\r\n      grad.addColorStop(0.2,  'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.82)+')');\r\n      grad.addColorStop(0.45, 'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.45)+')');\r\n      grad.addColorStop(0.7,  'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.15)+')');\r\n      grad.addColorStop(1,    'rgba('+c[0]+','+c[1]+','+c[2]+',0)');\r\n      ctx.fillStyle=grad; ctx.fillRect(0,0,s,s);\r\n    }\r\n    ctx.restore();\r\n  };\r\n\r\n  var main, glow;\r\n  try { main = new Orb(mainC); glow = new Orb(glowC); } catch(e){ return; }\r\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; }\r\n\r\n  var last = performance.now(), running = false, rafId = 0;\r\n  function animate(now){\r\n    if (!running) return;\r\n    try {\r\n      var dt = Math.min(0.05, (now-last)\/1000); last = now;\r\n      var lerp = 1 - Math.pow(0.15, dt);\r\n      sm.x += (mouse.x-sm.x)*lerp; sm.y += (mouse.y-sm.y)*lerp; sm.influence += (mouse.influence-sm.influence)*lerp;\r\n      main.update(dt, sm); glow.update(dt, sm); main.render(); glow.render();\r\n    } catch(e){ running = false; return; }\r\n    rafId = requestAnimationFrame(animate);\r\n  }\r\n  function start(){ if (!running){ running = true; last = performance.now(); rafId = requestAnimationFrame(animate); } }\r\n  function stop(){ running = false; if (rafId) cancelAnimationFrame(rafId); }\r\n  if ('IntersectionObserver' in window){\r\n    new IntersectionObserver(function(es){ es.forEach(function(en){ en.isIntersecting ? start() : stop(); }); }, { threshold: 0 }).observe(wrap);\r\n  }\r\n  start();\r\n  }\r\n\r\n  var _orbs = document.querySelectorAll('.vl-orb');\r\n  for (var _oi = 0; _oi < _orbs.length; _oi++) initOrb(_orbs[_oi]);\r\n  \/\/ Expuesto para orbes creados din\u00e1micamente (p. ej. el avatar de la burbuja \"Borrador generado\")\r\n  window.vlInitOrb = function (el){ if (el) initOrb(el); };\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CTA FINAL \u2014 la p\u00edldora \"se asienta\"\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function () {\r\n  'use strict';\r\n  var section = document.querySelector('.vl-cta-section');\r\n  if (!section) return;\r\n  var track = section.querySelector('.vl-cta-track');\r\n  var pill = document.getElementById('vl-cta-pill');\r\n  if (!track || !pill) return;\r\n  var title = pill.querySelector('h2');\r\n  var subtitle = pill.querySelector('p');\r\n  var buttons = pill.querySelector('div');   \/\/ contenedor de los botones\r\n  pill.classList.add('is-shown');            \/\/ visible (anula el opacity:0 de entrada)\r\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  function rng(p, a, b){ return Math.max(0, Math.min(1, (p - a) \/ (b - a))); }\r\n\r\n  \/\/ ESTADO COMPLETO (seguro): p\u00edldora negra, t\u00edtulo blanco a tama\u00f1o normal, subt\u00edtulo y botones visibles.\r\n  function formFull(){\r\n    pill.style.backgroundColor = '#161616';\r\n    pill.style.boxShadow = '0 26px 64px -28px rgba(0,0,0,0.5)';\r\n    if (title) { title.style.opacity = '1'; title.style.transform = 'none'; title.style.setProperty('color', '#FFFFFF', 'important'); }\r\n    if (subtitle) { subtitle.style.opacity = '1'; subtitle.style.transform = 'none'; }\r\n    if (buttons) { buttons.style.opacity = '1'; buttons.style.transform = 'none'; }\r\n  }\r\n\r\n  if (reduce) { formFull(); return; }\r\n\r\n  function update(){\r\n    try {\r\n      var rect = track.getBoundingClientRect();\r\n      var scrollable = track.offsetHeight - window.innerHeight;\r\n      if (scrollable <= 0) { formFull(); return; }     \/\/ m\u00f3vil\/tablet (sin scroll-jack)\r\n      var p = Math.max(0, Math.min(1, (-rect.top) \/ scrollable));\r\n      var vh = window.innerHeight || 800;\r\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)\r\n\r\n      \/\/ 1) FRASE: GRANDE desde el inicio; APARECE (fade) seg\u00fan ENTRA la secci\u00f3n (mucho antes, sin tanto blanco)\r\n      \/\/    y luego se comprime para colocarse dentro de la p\u00edldora. (Sin zoom de escala.)\r\n      if (title) {\r\n        title.style.opacity = rng(ent, 0.40, 0.62).toFixed(3);\r\n        var shrink = rng(p, 0.18, 0.52);\r\n        var ts = 1.28 - shrink * 0.28;                   \/\/ 1.28 (grande) \u2192 1.0 (cabe en la p\u00edldora)\r\n        title.style.transform = 'scale(' + ts.toFixed(3) + ')';\r\n      }\r\n      \/\/ 2) Se FORMA la p\u00edldora (gris del fondo \u2192 negra)\r\n      var fq = rng(p, 0.22, 0.52);\r\n      var L = Math.round(248 - fq * 226);              \/\/ 248 (gris) \u2192 22 (negro)\r\n      pill.style.backgroundColor = 'rgb(' + L + ',' + L + ',' + L + ')';\r\n      pill.style.boxShadow = fq > 0.04 ? '0 26px 64px -28px rgba(0,0,0,' + (0.5 * fq).toFixed(2) + ')' : 'none';\r\n      \/\/ Color del t\u00edtulo: SIEMPRE alto contraste (negro sobre claro, blanco sobre oscuro)\r\n      if (title) title.style.setProperty('color', L > 140 ? '#161616' : '#FFFFFF', 'important');\r\n      \/\/ 3) Subt\u00edtulo + botones: con la p\u00edldora ya oscura\r\n      var rev = rng(p, 0.56, 0.82);\r\n      if (subtitle) { subtitle.style.opacity = rev.toFixed(3); subtitle.style.transform = 'translateY(' + ((1 - rev) * 8).toFixed(1) + 'px)'; }\r\n      if (buttons) { buttons.style.opacity = rev.toFixed(3); buttons.style.transform = 'translateY(' + ((1 - rev) * 8).toFixed(1) + 'px)'; }\r\n    } catch (e) { formFull(); }\r\n  }\r\n\r\n  window.addEventListener('scroll', update, { passive: true });\r\n  window.addEventListener('resize', update, { passive: true });\r\n  \/\/ Red de seguridad: intervalo que mantiene la sincron\u00eda aunque fallen los eventos de scroll.\r\n  var ticks = 0, iv = setInterval(function(){ update(); if (++ticks > 140) clearInterval(iv); }, 250);\r\n  update();\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     PAIN CARDS \u2014 spotlight que sigue al cursor + tilt 3D + contadores\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function () {\r\n  'use strict';\r\n  var section = document.querySelector('.vl-pain-section');\r\n  if (!section) return;\r\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var noHover = window.matchMedia('(hover: none)').matches;\r\n  var cards = [].slice.call(section.querySelectorAll('.vl-pain-card'));\r\n\r\n  \/\/ --- Spotlight + tilt 3D (solo con rat\u00f3n) ---\r\n  if (!reduce && !noHover) {\r\n    var ticking = false, lastE = null;\r\n    function apply(){\r\n      ticking = false;\r\n      var e = lastE; if (!e) return;\r\n      var r = section.getBoundingClientRect();\r\n      section.style.setProperty('--mx', (e.clientX - r.left) + 'px');\r\n      section.style.setProperty('--my', (e.clientY - r.top) + 'px');\r\n      cards.forEach(function (card) {\r\n        var cr = card.getBoundingClientRect();\r\n        var inner = card.querySelector('.vl-pain-inner');\r\n        if (!inner) return;\r\n        if (e.clientX >= cr.left && cr.right >= e.clientX && e.clientY >= cr.top && cr.bottom >= e.clientY) {\r\n          var px = (e.clientX - cr.left) \/ cr.width - 0.5;\r\n          var py = (e.clientY - cr.top) \/ cr.height - 0.5;\r\n          inner.style.transform = 'rotateY(' + (px * 9).toFixed(2) + 'deg) rotateX(' + (-py * 9).toFixed(2) + 'deg)';\r\n        } else {\r\n          inner.style.transform = '';\r\n        }\r\n      });\r\n    }\r\n    section.addEventListener('pointermove', function (e) {\r\n      lastE = e; section.classList.add('is-spot');\r\n      if (!ticking) { ticking = true; requestAnimationFrame(apply); }\r\n    }, { passive: true });\r\n    section.addEventListener('pointerleave', function () {\r\n      section.classList.remove('is-spot');\r\n      cards.forEach(function (c) { var i = c.querySelector('.vl-pain-inner'); if (i) i.style.transform = ''; });\r\n    });\r\n  }\r\n\r\n  \/\/ Los contadores se animan 100% en CSS (ver @keyframes vl-cnt-*). Ya no se gestionan por JS.\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     ATRIBUCION DE CAMPANA en los botones \"Pide una demo\"\r\n     Ya no hay formulario propio: los CTA van a la agenda. Para no perder el origen del\r\n     lead (el KPI del funnel), las utm_* de la URL viajan como parametros de ese enlace.\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function () {\r\n  'use strict';\r\n\r\n  \/* \u2550\u2550\u2550 DESTINO DE LOS CTA DE DEMO \u2014 CAMBIAR AQUI \u2550\u2550\u2550\r\n     Misma agenda que usa el boton \"Solicitar demo\" de la cabecera de voicit.com.\r\n     Para migrar a HubSpot Meetings basta con sustituir esta constante y el href que\r\n     lleva cada boton en el HTML (esta puesto ahi para que funcione tambien sin JS).\r\n     OJO: no usar https:\/\/voicit.com\/solicitar-demo\/ \u2014 devuelve 404. *\/\r\n  var VL_DEMO_URL = 'https:\/\/calendly.com\/alvaroarres\/voicitcall';\r\n\r\n  var UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];\r\n\r\n  \/\/ La query string solo llega en la primera carga: se guarda para que sobreviva\r\n  \/\/ a la navegacion interna dentro del sitio.\r\n  try {\r\n    var qs = new URLSearchParams(window.location.search);\r\n    UTM_KEYS.forEach(function (k) {\r\n      var v = qs.get(k);\r\n      if (v) { try { sessionStorage.setItem('vl_' + k, v); } catch (e) {} }\r\n    });\r\n  } catch (e) {}\r\n\r\n  var parts = [];\r\n  UTM_KEYS.forEach(function (k) {\r\n    var v = '';\r\n    try { v = sessionStorage.getItem('vl_' + k) || ''; } catch (e) {}\r\n    if (v) parts.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));\r\n  });\r\n\r\n  var q = parts.join('&');\r\n  if (!q) return;                       \/\/ sin UTMs, el href del HTML ya es el correcto\r\n  var links = document.querySelectorAll('.vl-landing a[data-vl-agenda]');\r\n  \/* OJO: comparaciones solo con mayor-que. El signo menor-que hace que WordPress\r\n     lea una etiqueta falsa y destroce el separador de query de la linea de abajo,\r\n     por eso va con String.fromCharCode(38) y no literal. *\/\r\n  for (var i = 0; links.length > i; i++) {\r\n    var base = links[i].getAttribute('href') || VL_DEMO_URL;\r\n    var sep = base.indexOf('?') === -1 ? '?' : String.fromCharCode(38);\r\n    links[i].setAttribute('href', base + sep + q);\r\n  }\r\n})();\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     PASO 1 \u2014 Transcripci\u00f3n en vivo (un solo reloj rAF para todo el mockup)\r\n     Optimizaciones frente al mockup original de la landing de llamadas:\r\n       \u00b7 la onda ya no reescribe 28 gradientes por fotograma: se revela una capa con clip-path\r\n       \u00b7 el cron\u00f3metro solo se escribe cuando cambia el segundo\r\n       \u00b7 el bucle se para fuera de pantalla (IntersectionObserver) y con la pesta\u00f1a oculta\r\n       \u00b7 la m\u00e1quina de escribir va en este mismo reloj (antes: setInterval propio a 19 ms)\r\n         y el cursor es un pseudo-elemento (antes: un nodo reinsertado en cada car\u00e1cter)\r\n     Sin '<' en comparaciones: solo '>' y '>=' (trampa del troceador de WordPress).\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\r\n(function () {\r\n  'use strict';\r\n  var card = document.getElementById('vl-vm-live');\r\n  if (!card) return;\r\n  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\r\n\r\n  var timerEl = card.querySelector('[data-vm-timer]');\r\n  var fill    = card.querySelector('[data-vm-fill]');\r\n  var win     = card.querySelector('.vl-vm-win');\r\n  var scroll  = card.querySelector('[data-vm-scroll]');\r\n  if (!timerEl || !fill || !win || !scroll) return;\r\n\r\n  var BASE = 252;      \/* 04:12 \u2014 inicio del bucle *\/\r\n  var SPEED = 22;      \/* ms por car\u00e1cter *\/\r\n  var GAP = 12;        \/* margen entre mensajes (.vl-vm-msg) *\/\r\n  var LEAD = 400;\r\n  var READ = 750;\r\n  var ENDHOLD = 1900;\r\n\r\n  \/* Las intervenciones se leen del HTML: as\u00ed TranslatePress puede traducirlas *\/\r\n  var originals = [].slice.call(scroll.querySelectorAll('.vl-vm-msg'));\r\n  if (originals.length === 0) return;\r\n  var msgs = originals.map(function (node) {\r\n    return { tpl: node.cloneNode(true), text: node.querySelector('.vl-vm-ghost').textContent };\r\n  });\r\n\r\n  var acc = LEAD;\r\n  msgs.forEach(function (m) {\r\n    m.spawnAt = acc;\r\n    m.typeDur = Math.max(340, m.text.length * SPEED);\r\n    acc = acc + m.typeDur + READ;\r\n  });\r\n  var T = acc + ENDHOLD;\r\n\r\n  card.classList.add('vl-vm-live');\r\n\r\n  \/* Altura fija = el par de intervenciones consecutivas m\u00e1s alto (nada se recoloca) *\/\r\n  function measureWin() {\r\n    var rack = document.createElement('div');\r\n    rack.style.cssText = 'position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none;';\r\n    msgs.forEach(function (m) {\r\n      var c = m.tpl.cloneNode(true);\r\n      c.querySelector('.vl-vm-ghost').style.visibility = 'visible';\r\n      rack.appendChild(c);\r\n    });\r\n    win.appendChild(rack);\r\n    var hs = [].slice.call(rack.children).map(function (n) { return n.offsetHeight; });\r\n    win.removeChild(rack);\r\n    var best = 0, i;\r\n    for (i = 0; hs.length - 1 > i; i = i + 1) {\r\n      var pair = hs[i] + GAP + hs[i + 1];\r\n      if (pair > best) best = pair;\r\n    }\r\n    win.style.maxHeight = 'none';\r\n    win.style.height = best + 'px';\r\n  }\r\n\r\n  scroll.innerHTML = '';\r\n  measureWin();\r\n  var rt;\r\n  window.addEventListener('resize', function () {\r\n    clearTimeout(rt);\r\n    rt = setTimeout(measureWin, 200);\r\n  }, { passive: true });\r\n\r\n  var curY = 0;\r\n  var active = null;      \/* {typed, text, n} \u2014 mensaje que se est\u00e1 escribiendo *\/\r\n\r\n  function spawn(k) {\r\n    var node = msgs[k].tpl.cloneNode(true);\r\n    var typed = node.querySelector('.vl-vm-typed');\r\n    typed.textContent = '';\r\n    typed.className = 'vl-vm-typed is-typing';\r\n    node.style.opacity = '0';\r\n    node.style.transform = 'translateY(7px)';\r\n    node.style.transition = 'opacity .3s ease, transform .3s ease';\r\n    scroll.appendChild(node);\r\n    requestAnimationFrame(function () { node.style.opacity = '1'; node.style.transform = 'translateY(0)'; });\r\n    var prev = node.previousElementSibling;\r\n    if (prev) {\r\n      curY = prev.offsetTop;\r\n      scroll.style.transform = 'translateY(-' + curY + 'px)';\r\n    }\r\n    \/* poda compensando el transform, sin salto visual *\/\r\n    while (scroll.children.length > 6) {\r\n      var first = scroll.firstElementChild;\r\n      var hh = first.offsetHeight + GAP;\r\n      scroll.removeChild(first);\r\n      curY = curY - hh;\r\n      scroll.style.transition = 'none';\r\n      scroll.style.transform = 'translateY(-' + curY + 'px)';\r\n      void scroll.offsetHeight;\r\n      scroll.style.transition = '';\r\n    }\r\n    if (active && active.typed) active.typed.className = 'vl-vm-typed';\r\n    active = { typed: typed, text: msgs[k].text, n: -1, at: msgs[k].spawnAt };\r\n  }\r\n\r\n  \/* \u2014 Un \u00fanico reloj para cron\u00f3metro, onda y m\u00e1quina de escribir \u2014 *\/\r\n  var running = false, raf = 0, t0 = 0, elapsed = 0;\r\n  var lastE = -1, lastSec = -1, lastPct = -1, started = [];\r\n\r\n  function frame(now) {\r\n    if (!running) return;\r\n    elapsed = now - t0;\r\n    var e = elapsed % T;\r\n    if (lastE > e) { started = []; }        \/* nueva vuelta *\/\r\n    lastE = e;\r\n\r\n    \/* cron\u00f3metro: solo se escribe al cambiar el segundo *\/\r\n    var cs = BASE + Math.floor(e \/ 1000);\r\n    if (cs !== lastSec) {\r\n      lastSec = cs;\r\n      var mm = Math.floor(cs \/ 60), ss = cs % 60;\r\n      timerEl.textContent = (mm > 9 ? '' + mm : '0' + mm) + ':' + (ss > 9 ? '' + ss : '0' + ss);\r\n    }\r\n\r\n    \/* onda: UNA propiedad componible, redondeada a 0,5 % para no escribir de m\u00e1s *\/\r\n    var pct = Math.round((e \/ T) * 200) \/ 2;\r\n    if (pct !== lastPct) {\r\n      lastPct = pct;\r\n      fill.style.clipPath = 'inset(0 ' + (100 - pct) + '% 0 0)';\r\n    }\r\n\r\n    \/* agenda de intervenciones *\/\r\n    msgs.forEach(function (m, k) {\r\n      if (started.indexOf(k) >= 0) return;\r\n      if (e >= m.spawnAt) { started.push(k); spawn(k); }\r\n    });\r\n\r\n    \/* m\u00e1quina de escribir en este mismo reloj *\/\r\n    if (active) {\r\n      var n = Math.floor((e - active.at) \/ SPEED);\r\n      if (n >= active.text.length) {\r\n        n = active.text.length;\r\n        if (active.n !== n) { active.typed.textContent = active.text; active.typed.className = 'vl-vm-typed'; active.n = n; }\r\n      } else if (n >= 0 && n !== active.n) {\r\n        active.n = n;\r\n        active.typed.textContent = active.text.slice(0, n);\r\n      }\r\n    }\r\n\r\n    raf = requestAnimationFrame(frame);\r\n  }\r\n\r\n  function start() {\r\n    if (running) return;\r\n    running = true;\r\n    t0 = performance.now() - elapsed;      \/* reanuda sin saltos *\/\r\n    raf = requestAnimationFrame(frame);\r\n  }\r\n  function stop() {\r\n    if (!running) return;\r\n    running = false;\r\n    if (raf) cancelAnimationFrame(raf);\r\n    raf = 0;\r\n  }\r\n\r\n  var onScreen = false;\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (en) {\r\n        onScreen = en.isIntersecting;\r\n        if (onScreen && document.visibilityState !== 'hidden') { start(); } else { stop(); }\r\n      });\r\n    }, { threshold: 0.15 }).observe(card);\r\n  } else {\r\n    onScreen = true;\r\n    start();\r\n  }\r\n  document.addEventListener('visibilitychange', function () {\r\n    if (document.visibilityState === 'hidden') { stop(); }\r\n    else if (onScreen) { start(); }\r\n  });\r\n})();\r\n<\/script>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>+ El informe autom\u00e1tico de la entrevista, en Viterbit con un clic. Tu pipeline, siempre al d\u00eda. Voicit genera informes autom\u00e1ticos de cada candidato tras cada entrevista y los guarda en Viterbit con un clic \u2014 incluidos los candidatos que no llegan a la final. Recupera la informaci\u00f3n que hoy se pierde y construye una [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9489,"parent":9466,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":"","rank_math_title":"Integraci\u00f3n Voicit + Viterbit | Informes de entrevista","rank_math_description":"Voicit genera el informe de cada entrevista y lo guarda en la ficha del candidato en Viterbit con un clic. Integraci\u00f3n nativa, sin coste extra. Pide demo.","rank_math_focus_keyword":"integraci\u00f3n viterbit"},"class_list":["post-9467","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/comments?post=9467"}],"version-history":[{"count":20,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9467\/revisions"}],"predecessor-version":[{"id":9502,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9467\/revisions\/9502"}],"up":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/pages\/9466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/media\/9489"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/de\/wp-json\/wp\/v2\/media?parent=9467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}