{"id":9218,"date":"2026-07-15T10:49:05","date_gmt":"2026-07-15T10:49:05","guid":{"rendered":"https:\/\/voicit.com\/grabar-entrevistas-telefonicas\/"},"modified":"2026-07-17T18:27:04","modified_gmt":"2026-07-17T18:27:04","slug":"gravar-entrevistes-telefoniques","status":"publish","type":"page","link":"https:\/\/voicit.com\/ca\/grabar-entrevistas-telefonicas\/","title":{"rendered":"Gravar entrevistes telef\u00f2niques de candidats amb IA"},"content":{"rendered":"\n<!--\n  VOICIT \u2014 Landing: Grabar y documentar entrevistas telef\u00f3nicas de candidatos (RRHH)\n  URL: \/grabar-entrevistas-telefonicas\/\n  Embebida como Custom HTML en Gutenberg.\n-->\n\n<!-- Overrides para forzar full-width en la p\u00e1gina de WP (Astra), ocultar el page title generado por el tema, y resetear botones que el tema styliza con el color de marca -->\n<style id=\"vl-wp-overrides\">\n  \/* \u2500\u2500 1) FULL-WIDTH: anular TODOS los wrappers de Astra incluidos los IDs espec\u00edficos \u2500\u2500\n        Jerarqu\u00eda real: body > #page > #content > .ast-container > #primary > main#main > article#post-8479 > .entry-content > .vl-landing *\/\n  body.page-id-9218 div#page.hfeed.site,\n  body.page-id-9218 div#content.site-content,\n  body.page-id-9218 div#content,\n  body.page-id-9218 .ast-container,\n  body.page-id-9218 div#primary.content-area,\n  body.page-id-9218 main#main.site-main,\n  body.page-id-9218 article#post-8479,\n  body.page-id-9218 article.page,\n  body.page-id-9218 .entry-content,\n  body.page-id-9218 .entry-content.clear {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n\n  \/* \u2500\u2500 FONDO: toda el \u00e1rea superior (incluida la barra del header) usa el gris del hero \u2192 sin franja blanca \u2500\u2500 *\/\n  body.page-id-9218,\n  body.page-id-9218 div#page.hfeed.site,\n  body.page-id-9218 div#content.site-content,\n  body.page-id-9218 .ast-container,\n  body.page-id-9218 div#primary.content-area,\n  body.page-id-9218 main#main.site-main,\n  body.page-id-9218 article#post-8479,\n  body.page-id-9218 .entry-content,\n  body.page-id-9218 .site-header,\n  body.page-id-9218 #masthead,\n  body.page-id-9218 .ast-primary-header-bar,\n  body.page-id-9218 .main-header-bar {\n    background-color: #F8F8F8 !important;\n  }\n\n  \/* Variables WordPress de padding global *\/\n  body.page-id-9218 {\n    --wp--style--root--padding-top: 0 !important;\n    --wp--style--root--padding-right: 0 !important;\n    --wp--style--root--padding-bottom: 0 !important;\n    --wp--style--root--padding-left: 0 !important;\n  }\n\n  \/* Bloques Gutenberg envolventes *\/\n  body.page-id-9218 .wp-block-html,\n  body.page-id-9218 .wp-site-blocks,\n  body.page-id-9218 .is-layout-flow,\n  body.page-id-9218 .is-layout-constrained,\n  body.page-id-9218 .has-global-padding {\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: 100% !important;\n    width: 100% !important;\n  }\n\n  \/* El .vl-landing fuerza ancho viewport usando transform \u2014 m\u00e9todo bulletproof *\/\n  body.page-id-9218 .vl-landing {\n    width: 100vw !important;\n    max-width: 100vw !important;\n    position: relative !important;\n    left: 50% !important;\n    transform: translateX(-50%) !important;\n    margin: 0 !important;\n  }\n\n  \/* \u2500\u2500 3) Ocultar t\u00edtulo de p\u00e1gina del tema \u2500\u2500 *\/\n  body.page-id-9218 .entry-header,\n  body.page-id-9218 .ast-page-title-wrapper,\n  body.page-id-9218 .ast-archive-description,\n  body.page-id-9218 .entry-title,\n  body.page-id-9218 h1.entry-title,\n  body.page-id-9218 .page-title {\n    display: none !important;\n  }\n  body.page-id-9218 .entry-content > *:not(.vl-landing) { display: none; }\n\n  \/* \u2500\u2500 4) RESET BOTONES \u2014 Astra pinta TODOS los <button> con el color de marca (#E7FE15).\n        Hay que forzar nuestros colores espec\u00edficos en cada bot\u00f3n del mockup. \u2500\u2500 *\/\n  .vl-landing button,\n  .vl-landing .vl-btn {\n    box-shadow: none !important;\n    text-transform: none !important;\n    letter-spacing: normal !important;\n    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;\n  }\n\n  \/* File picker (Paso 1) \u2014 bot\u00f3n \"Subir informe\" *\/\n  .vl-landing .vl-mk-fp-btn {\n    background: #ECECEC !important;\n    color: #9A9A9A !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-filepicker.is-visible .vl-mk-fp-btn.is-enabled,\n  .vl-landing .vl-mk-fp-btn.is-enabled {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n  }\n\n  \/* Chat (Paso 2) \u2014 botones \"S\u00ed, generar\" \/ \"Ajustar\" \/ \u2715 *\/\n  .vl-landing .vl-mk-chat-btn {\n    background: #F2F2F2 !important;\n    color: #424242 !important;\n    border: 1px solid #E5E5E5 !important;\n  }\n  .vl-landing .vl-mk-chat-btn:hover {\n    background: #E5E5E5 !important;\n    border-color: #161616 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-chat-btn--primary {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n    border-color: #161616 !important;\n  }\n  .vl-landing .vl-mk-chat-btn--primary:hover {\n    background: #2C2C2C !important;\n    border-color: #2C2C2C !important;\n    color: #FFFFFF !important;\n  }\n  .vl-landing .vl-mk-chat-li-delete {\n    background: rgba(0,0,0,0.06) !important;\n    color: #161616 !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-chat-li-delete:hover {\n    background: #FCEAEA !important;\n    color: #DC2626 !important;\n  }\n\n  \/* Editor (Paso 3) \u2014 botones de iconos formato\/longitud + acci\u00f3n \"Guardar plantilla\" *\/\n  .vl-landing .vl-mk-editor-icon-btn {\n    background: transparent !important;\n    color: #4B4B4B !important;\n    border: none !important;\n  }\n  .vl-landing .vl-mk-editor-icon-btn:hover { background: #F0F0F0 !important; }\n  .vl-landing .vl-mk-editor-icon-btn.is-active {\n    background: #E5E5E5 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action {\n    background: #FFFFFF !important;\n    color: #424242 !important;\n    border: 1px solid #DDDDDD !important;\n  }\n  .vl-landing .vl-mk-editor-action:hover {\n    background: #F5F5F5 !important;\n    border-color: #161616 !important;\n    color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action--primary {\n    background: #161616 !important;\n    color: #FFFFFF !important;\n    border-color: #161616 !important;\n  }\n  .vl-landing .vl-mk-editor-action--primary:hover {\n    background: #2C2C2C !important;\n    border-color: #2C2C2C !important;\n    color: #FFFFFF !important;\n  }\n\n  \/* Editor (Paso 3, m\u00f3vil) \u2014 bot\u00f3n \"Listo\" *\/\n  .vl-landing .vl-mk-editor-done { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\n  .vl-landing .vl-mk-editor-done:hover { background: #2C2C2C !important; }\n\n  \/* Hero \u2014 bot\u00f3n \"Generar\" (negro de base \u2192 amarillo SOLO al generar) *\/\n  .vl-landing .vl-mk-genbtn { background: #161616 !important; color: #FFFFFF !important; border: none !important; }\n  .vl-landing .vl-mk-genbtn:hover { background: #2C2C2C !important; }\n  .vl-landing .vl-mk-genbtn.is-done { background: #161616 !important; color: #FFFFFF !important; }\n  .vl-landing .vl-mk-genbtn.is-done:hover { background: #262626 !important; }\n  .vl-landing .vl-mk-genbtn .vl-gen-tick { color: #E7FE15 !important; }\n\n  \/* Hero \u2014 iconos Formato\/Longitud de la plantilla: GRISES (no amarillos del tema) + opciones del mini-men\u00fa *\/\n  .vl-landing .vl-mk-cfg-ico { background: #F2F2F2 !important; color: #6E6E6E !important; border: none !important; }\n  .vl-landing .vl-mk-cfg-ico:hover { background: #E6E6E6 !important; color: #161616 !important; }\n  .vl-landing .vl-mk-cfg-ico.is-open { background: #E2E2E2 !important; color: #161616 !important; }\n  .vl-landing .vl-mk-cfg-opt { background: transparent !important; color: #2A2A2A !important; border: none !important; }\n  .vl-landing .vl-mk-cfg-opt:hover { background: #F4F4F4 !important; }\n  .vl-landing .vl-mk-cfg-opt.is-active { background: #F0F0F0 !important; color: #161616 !important; }\n<\/style>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VOICIT LANDING \u2014 Design System\n   Basado en gu\u00eda de marca oficial\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');\n\n\/* Reset dentro del contenedor *\/\n.vl-landing *, .vl-landing *::before, .vl-landing *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.vl-landing {\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;\n  color: #161616;\n  line-height: 1.6;\n  \/* overflow-x: clip evita scroll horizontal SIN romper position:sticky de los descendientes *\/\n  overflow-x: clip;\n  \/* Full-width breakout robusto: funciona si el parent es boxed (1200px) o ya es full-width.\n     calc(50% - 50vw) da un margin negativo solo cuando el parent es m\u00e1s estrecho que el viewport. *\/\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500 Tipograf\u00eda \u2500\u2500\u2500 *\/\n.vl-landing h1 {\n  font-size: clamp(36px, 5vw, 56px);\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: #161616;\n}\n\/* BALANCE GLOBAL DE T\u00cdTULOS: todos los h1\/h2\/h3 reparten sus l\u00edneas de forma\n   equilibrada para que nunca quede una palabra hu\u00e9rfana sola en la \u00faltima l\u00ednea\n   (sobre todo en tablet\/m\u00f3vil). En desktop, los que caben en una l\u00ednea no se ven\n   afectados (balance es no-op). Se aplica SIEMPRE, sin necesidad de clases. *\/\n.vl-landing h1,\n.vl-landing h2,\n.vl-landing h3 {\n  text-wrap: pretty;\n  text-wrap: balance;\n}\n\n.vl-landing h2 {\n  font-size: clamp(28px, 3.5vw, 42px);\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: -0.01em;\n  color: #161616;\n}\n\n.vl-landing h3 {\n  font-size: clamp(20px, 2.5vw, 28px);\n  font-weight: 700;\n  line-height: 1.3;\n  color: #161616;\n}\n\n.vl-landing h4 {\n  font-size: 18px;\n  font-weight: 600;\n  color: #161616;\n}\n\n.vl-landing p {\n  font-size: 18px;\n  line-height: 1.7;\n  color: #424242;\n}\n\n.vl-landing .text-secondary {\n  color: #6E6E6E;\n}\n\n.vl-landing .text-small {\n  font-size: 15px;\n}\n\n\/* \u2500\u2500\u2500 Layout \u2500\u2500\u2500 *\/\n.vl-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n.vl-container--narrow {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n.vl-section {\n  padding: 100px 0;\n}\n\n.vl-section--alt {\n  background: #F2F2F2;\n}\n\n.vl-section--dark {\n  background: #000000;\n  color: #FFFFFF;\n}\n\n\/* Bloque del CTA final \u2014 tarjeta oscura de esquinas redondeadas sobre fondo claro *\/\n.vl-cta-pill {\n  background: #161616;             \/* bloque OSCURO para que el CTA destaque sobre el fondo claro *\/\n  border-radius: 40px;            \/* rect\u00e1ngulo redondeado (antes 9999px = c\u00e1psula) *\/\n  padding: 56px 80px;\n  max-width: 980px;\n  margin: 0 auto;\n  color: #FFFFFF;\n  position: relative;\n  box-shadow: 0 26px 64px -28px rgba(0,0,0,0.5);\n}\n.vl-cta-pill h2 { color: #FFFFFF !important; }\n.vl-cta-pill p  { color: rgba(255,255,255,0.72) !important; }\n\/* Bot\u00f3n principal: amarillo de marca (permitido sobre oscuro) con destello sutil *\/\n.vl-cta-pill .vl-btn--brand {\n  background: #E7FE15 !important;\n  color: #161616 !important;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n.vl-cta-pill .vl-btn--brand:hover {\n  background: #E7FE15 !important;\n  box-shadow: 0 12px 26px -8px rgba(231,254,21,0.55);   \/* sin \"levantarse\" *\/\n}\n.vl-cta-pill .vl-btn--brand::after {\n  content: '';\n  position: absolute; top: 0; left: -65%; width: 42%; height: 100%;\n  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);\n  transform: skewX(-18deg);\n  pointer-events: none;\n  animation: vl-cta-sheen 3.8s ease-in-out infinite;\n}\n@keyframes vl-cta-sheen {\n  0%, 20%  { left: -65%; }\n  55%, 100% { left: 135%; }\n}\n@media (prefers-reduced-motion: reduce) { .vl-cta-pill .vl-btn--brand::after { animation: none; } }\n\/* Bot\u00f3n secundario en versi\u00f3n oscura *\/\n.vl-cta-pill .vl-btn--secondary {\n  background: transparent !important;\n  border-color: rgba(255,255,255,0.45) !important;\n  color: #FFFFFF !important;\n  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;\n}\n.vl-cta-pill .vl-btn--secondary:hover {\n  border-color: #FFFFFF !important;\n  background: rgba(255,255,255,0.10) !important;   \/* sin \"levantarse\" *\/\n}\n\/* Entrada por opacidad (el escalado\/formaci\u00f3n al hacer scroll los controla el JS) *\/\n.vl-cta-pill { opacity: 0; transition: opacity 0.7s ease, background-color 0.12s linear, box-shadow 0.3s ease; will-change: transform, background-color; transform-origin: 50% 50%; }\n.vl-cta-pill.is-shown { opacity: 1; }\n\/* CTA din\u00e1mico: el t\u00edtulo cambia de color (negro\u2194blanco) con buen contraste seg\u00fan se forma la p\u00edldora *\/\n.vl-cta-pill h2 { transition: color 0.25s ease; will-change: color, transform; transform-origin: center; }\n.vl-cta-pill p, .vl-cta-pill > div { will-change: opacity, transform; }\n\/* CTA con SCROLL-JACK: primero la frase grande, luego se forma la p\u00edldora y el texto se comprime *\/\n.vl-cta-section { position: relative; }\n.vl-cta-track { position: relative; height: 150vh; }\n.vl-cta-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }\n@media (max-width: 1024px) {\n  .vl-cta-track { height: auto; }\n  .vl-cta-sticky { position: static; height: auto; padding: 80px 0 100px; }\n}\n@media (max-width: 768px) {\n  .vl-cta-pill {\n    padding: 56px 28px;\n    border-radius: 36px;\n  }\n}\n@media (max-width: 480px) {\n  .vl-cta-pill {\n    padding: 48px 22px;\n    border-radius: 28px;\n  }\n}\n\n.vl-section--dark h2,\n.vl-section--dark h3,\n.vl-section--dark h4 {\n  color: #FFFFFF;\n}\n\n.vl-section--dark p {\n  color: #B0B0B0;\n}\n\n\/* \u2500\u2500\u2500 Botones \u2500\u2500\u2500 *\/\n.vl-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 32px;\n  font-family: 'Manrope', sans-serif;\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 12px;\n  text-decoration: none !important;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  border: none;\n}\n\n.vl-btn--primary {\n  background: #161616 !important;\n  color: #FFFFFF !important;\n}\n\n.vl-btn--primary:hover {\n  background: #2C2C2C !important;\n}\n\n.vl-btn--secondary {\n  background: transparent !important;\n  color: #161616 !important;\n  border: 2px solid #DCDCDC;\n}\n\n.vl-btn--secondary:hover {\n  border-color: #161616;\n}\n\/* En el Hero el bot\u00f3n secundario va sobre los puntitos: fondo opaco (mismo gris) para que NO se transparenten a trav\u00e9s de \u00e9l *\/\n.vl-hero-actions .vl-btn--secondary { background: #F8F8F8 !important; }\n\n.vl-btn--brand {\n  background: #E7FE15 !important;\n  color: #161616 !important;\n  font-weight: 700;\n}\n\n.vl-btn--brand:hover {\n  background: #CDE213 !important;\n}\n\n\/* \u2500\u2500\u2500 Badge \u2500\u2500\u2500 *\/\n.vl-badge {\n  display: inline-block;\n  padding: 6px 16px;\n  border-radius: 100px;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n}\n\n.vl-badge--brand {\n  background: #161616;\n  color: #E7FE15;\n}\n\n.vl-badge--green {\n  background: #DBF0DE;\n  color: #29A63B;\n}\n\n.vl-badge--blue {\n  background: #E5F5FC;\n  color: #63C2ED;\n}\n\n.vl-badge--orange {\n  background: #FCE9DF;\n  color: #ED7840;\n}\n\n\/* \u2500\u2500\u2500 Cards \u2500\u2500\u2500 *\/\n.vl-card {\n  background: #FFFFFF;\n  border: 1px solid #DCDCDC;\n  border-radius: 16px;\n  padding: 36px;\n  transition: all 0.3s ease;\n}\n\n.vl-card:hover {\n  box-shadow: 0 8px 32px rgba(0,0,0,0.08);\n  transform: translateY(-4px);\n}\n\n.vl-card--dark {\n  background: #161616;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n\n.vl-card--dark h3, .vl-card--dark h4 {\n  color: #FFFFFF;\n}\n\n.vl-card--dark p {\n  color: #9A9A9A;\n}\n\n\/* \u2500\u2500\u2500 Grid \u2500\u2500\u2500 *\/\n.vl-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 32px;\n}\n\n.vl-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n\/* \u2500\u2500\u2500 Screenshot mock \u2500\u2500\u2500 *\/\n.vl-screenshot {\n  width: 100%;\n  border-radius: 16px;\n  border: 1px solid #DCDCDC;\n  box-shadow: 0 16px 48px rgba(0,0,0,0.1);\n  overflow: hidden;\n}\n\n.vl-screenshot img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* Placeholder para screenshots (reemplazar con img reales) *\/\n.vl-screenshot-placeholder {\n  width: 100%;\n  aspect-ratio: 16\/10;\n  border-radius: 16px;\n  border: 2px dashed #DCDCDC;\n  background: #FAFAFA;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: #9A9A9A;\n  text-align: center;\n  padding: 20px;\n}\n\n\/* \u2500\u2500\u2500 Iconos decorativos \u2500\u2500\u2500 *\/\n.vl-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 24px;\n  flex-shrink: 0;\n}\n\n.vl-icon--brand {\n  background: #161616;\n  color: #E7FE15;\n}\n\n.vl-icon--light {\n  background: #F2F2F2;\n  color: #161616;\n}\n\n.vl-icon img {\n  width: 32px;\n  height: 32px;\n  object-fit: contain;\n}\n\n.vl-icon img.vl-icon-invert {\n  filter: invert(1);\n}\n\n\/* \u2500\u2500\u2500 Tooltip info icon \u2500\u2500\u2500 *\/\n.vl-info-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: default;\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n.vl-info-tooltip .vl-info-icon {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: #E8E8E8;\n  color: #777;\n  font-size: 12px;\n  font-weight: 700;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  flex-shrink: 0;\n  transition: background 0.2s;\n}\n\n.vl-info-tooltip:hover .vl-info-icon {\n  background: #D0D0D0;\n  color: #444;\n}\n\n.vl-info-tooltip .vl-info-text {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #161616;\n  color: #FFFFFF;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.5;\n  padding: 12px 16px;\n  border-radius: 10px;\n  width: 320px;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s, visibility 0.25s;\n  pointer-events: none;\n  z-index: 10;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n}\n\n.vl-info-tooltip .vl-info-text::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #161616;\n}\n\n.vl-info-tooltip:hover .vl-info-text {\n  opacity: 1;\n  visibility: visible;\n}\n\n\/* \u2500\u2500 Card flip on hover \u2500\u2500 *\/\n.vl-card--flip {\n  position: relative;\n  min-height: 120px;\n  cursor: default;\n}\n.vl-card-flip-front {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 20px;\n}\n.vl-card-flip-front h4 {\n  font-size: 20px;\n  margin: 0;\n}\n.vl-card-flip-back {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 32px;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  z-index: 2;\n}\n.vl-card--flip:hover .vl-card-flip-back {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* \u2500\u2500\u2500 Separador gradiente Voicit \u2500\u2500\u2500 *\/\n.vl-gradient-bar {\n  height: 4px;\n  background: linear-gradient(90deg, #E7FE15 0%, #B8CC76 50%, #56AB91 100%);\n  border-radius: 2px;\n}\n\n\/* \u2500\u2500\u2500 Step indicator \u2500\u2500\u2500 *\/\n.vl-step-number {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: #161616;\n  color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  font-weight: 800;\n  flex-shrink: 0;\n  line-height: 1;\n}\n\/* Alinear verticalmente el n\u00famero del paso con su t\u00edtulo (Astra mete margin al h3) *\/\n.vl-step-row .vl-step-number + h3,\n.vl-landing .vl-step-row h3 {\n  margin: 0 !important;\n  padding: 0 !important;\n  line-height: 1.25;\n  display: flex;\n  align-items: center;\n}\n\n\/* \u2500\u2500\u2500 Animaciones (scroll reveal) \u2500\u2500\u2500 *\/\n.vl-reveal {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.vl-reveal.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.vl-reveal-delay-1 { transition-delay: 0.1s; }\n.vl-reveal-delay-2 { transition-delay: 0.2s; }\n.vl-reveal-delay-3 { transition-delay: 0.3s; }\n\n\/* Animaci\u00f3n float suave para screenshots *\/\n@keyframes vl-float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n}\n\n.vl-float {\n  animation: vl-float 4s ease-in-out infinite;\n}\n\n\/* Pulse para CTAs *\/\n@keyframes vl-pulse {\n  0%, 100% { box-shadow: 0 0 0 0 rgba(231,254,21,0.4); }\n  50% { box-shadow: 0 0 0 12px rgba(231,254,21,0); }\n}\n\n.vl-pulse {\n  animation: vl-pulse 2.5s ease-in-out infinite;\n}\n\n\/* Gradiente de fondo animado (hero) *\/\n@keyframes vl-gradient-move {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n\/* Ticker \/ marquee logos *\/\n@keyframes vl-scroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n\/* \u2500\u2500\u2500 Testimonial \u2500\u2500\u2500 *\/\n.vl-testimonial {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 36px;\n  border: 1px solid #DCDCDC;\n  position: relative;\n}\n\n.vl-testimonial::before {\n  content: '';\n  position: absolute;\n  top: 24px;\n  left: 28px;\n  width: 40px;\n  height: 27px;\n  background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='44' height='30' viewBox='0 0 44 30'%3E%3Cpath d='M5 2 L19 2 L13 28 L1 28 Z' fill='%23E7FE15'\/%3E%3Cpath d='M26 2 L40 2 L34 28 L22 28 Z' fill='%23E7FE15'\/%3E%3C\/svg%3E\") no-repeat center \/ contain;\n}\n\n.vl-testimonial-text {\n  font-size: 17px;\n  line-height: 1.7;\n  color: #424242;\n  font-style: italic;\n  padding-top: 28px;\n}\n\n.vl-testimonial-author {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-top: 24px;\n}\n\n.vl-testimonial-avatar {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: #F2F2F2;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.vl-testimonial-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.vl-testimonial-name {\n  font-size: 15px;\n  font-weight: 700;\n  color: #161616;\n}\n\n.vl-testimonial-role {\n  font-size: 13px;\n  color: #6E6E6E;\n  line-height: 1.4;\n}\n\n.vl-testimonials-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 24px;\n}\n\n@media (max-width: 900px) {\n  .vl-testimonials-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n\/* \u2500\u2500\u2500 Testimonial sticky-stack (PORTADO LITERAL de la referencia buscador-oportunidades) \u2500\u2500\u2500 *\/\n.vl-tstack-section { position: relative; }\n\n\/* Track de scroll: 3 viewports de altura = espacio para mostrar las 3 tarjetas *\/\n.vl-tstack-track {\n  position: relative;\n  height: 300vh;\n}\n\n\/* El contenido se queda fijo mientras dura el track *\/\n.vl-tstack-sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  overflow: hidden;\n  padding: 60px 0;\n  box-sizing: border-box;\n}\n\n\/* Contenedor de las cards (apiladas en absoluto). *\/\n.vl-tstack-cards {\n  position: relative;\n  width: 100%;\n  max-width: 620px;\n  margin: 0 auto;\n  min-height: 400px;\n}\n\n\/* Cada card empieza fuera de pantalla (abajo) y entra al llegar su turno. *\/\n.vl-tstack-card {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  margin: 0;\n  transform: translateY(120vh);\n  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);\n  background: #FFFFFF;\n  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.15);\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  bottom: auto;\n}\n.vl-tstack-card[data-tstack-idx=\"0\"] { z-index: 1; }\n.vl-tstack-card[data-tstack-idx=\"1\"] { z-index: 2; }\n.vl-tstack-card[data-tstack-idx=\"2\"] { z-index: 3; }\n\n.vl-tstack-card.is-visible {\n  transform: translateY(0);\n}\n\n\/* Las cards detr\u00e1s se mueven ligeramente arriba con cada nueva (\"pila de cartas\") *\/\n.vl-tstack-card.is-behind-1 { transform: translateY(-14px) scale(0.97); }\n.vl-tstack-card.is-behind-2 { transform: translateY(-26px) scale(0.94); }\n.vl-tstack-card.is-behind-3 { transform: translateY(-36px) scale(0.91); }\n\n.vl-testimonial--compact {\n  padding: 32px 32px 28px;\n}\n\n\/* \u2550\u2550\u2550 MURO DEL AMOR: rese\u00f1as de fondo (estilo cr\u00e9ditos Star Wars) \u2014 PORTADO LITERAL \u2550\u2550\u2550 *\/\n\/* OJO: NO cambiar el position de .vl-tstack-sticky (es sticky y ya contiene el muro absoluto). *\/\n.vl-tstack-sticky > .vl-container { position: relative; z-index: 3; }\n.vl-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 30%; }\n.vl-wall::after {\n  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;\n  background:\n    radial-gradient(ellipse 46% 118% at 50% 46%, rgba(248,248,248,0.96) 0%, rgba(248,248,248,0.68) 40%, rgba(248,248,248,0) 72%),\n    linear-gradient(180deg, #F8F8F8 0%, rgba(248,248,248,0) 20%, rgba(248,248,248,0) 80%, #F8F8F8 100%);\n}\n.vl-wall-inner {\n  position: absolute; left: 50%; top: -8%; width: 168%;\n  transform-origin: 50% 0;\n  transform: translateX(-50%) rotateX(42deg);\n  transform-style: preserve-3d;\n  opacity: 0.7; filter: blur(1px);\n  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;\n  animation: vl-wall-rise 55s linear infinite;\n}\n@keyframes vl-wall-rise {\n  from { transform: translateX(-50%) rotateX(42deg) translateY(0); }\n  to   { transform: translateX(-50%) rotateX(42deg) translateY(-50%); }\n}\n.vl-wall-card {\n  background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 10px;\n  padding: 12px 13px; box-shadow: 0 4px 14px -11px rgba(0,0,0,0.10);\n  text-align: left;\n}\n.vl-wall-stars { color: #CFCFCF; font-size: 11px; letter-spacing: 1px; }\n.vl-wall-txt { font-size: 12.5px; line-height: 1.4; color: #7C7C7C; margin: 6px 0 8px; }\n.vl-wall-who { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #6A6A6A; }\n.vl-wall-ava { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,#C2C2C2,#D8D8D8); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n@media (prefers-reduced-motion: reduce) { .vl-wall-inner { animation: none; } }\n@media (max-width: 900px) { .vl-wall { display: none; } }\n\n.vl-testimonial-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #161616;\n  color: #FFFFFF;\n  border-radius: 100px;\n  padding: 10px 18px;\n  font-size: 14px;\n  font-weight: 600;\n  margin-bottom: 16px;\n}\n\n.vl-testimonial-rating .vl-stars {\n  color: #E7FE15;\n  letter-spacing: 1px;\n}\n\n.vl-testimonial-avatar--initials {\n  background: linear-gradient(135deg, #1F1F1F 0%, #3A3A3A 100%);\n  color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 16px;\n  letter-spacing: 0.5px;\n}\n\n\/* \u2500\u2500\u2500 FAQ (estilo minimalista, chevron a la izquierda) \u2500\u2500\u2500 *\/\n.vl-faq details {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #ECECEC;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n.vl-faq details:last-child {\n  border-bottom: none;\n}\n\n.vl-faq summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 20px 0 20px 36px;\n  font-size: 17px;\n  font-weight: 500;\n  color: #161616;\n  display: block;\n  position: relative;\n  transition: color 0.2s;\n}\n.vl-faq summary:hover {\n  color: #424242;\n}\n\n.vl-faq summary::-webkit-details-marker { display: none; }\n\n\/* Chevron a la izquierda del texto, construido con bordes CSS (sin imagen) *\/\n.vl-faq summary::before {\n  content: \"\";\n  position: absolute;\n  left: 8px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #161616;\n  border-bottom: 2px solid #161616;\n  transform: translateY(-75%) rotate(45deg);\n  transition: transform 0.25s ease;\n}\n.vl-faq details[open] summary::before {\n  transform: translateY(-25%) rotate(-135deg);\n}\n\n.vl-faq .vl-faq-answer {\n  padding: 0 0 20px 36px;\n  font-size: 15.5px;\n  line-height: 1.65;\n  color: #6E6E6E;\n}\n\/* La respuesta aparece de forma org\u00e1nica, de arriba hacia abajo, al abrir *\/\n.vl-faq details[open] .vl-faq-answer { animation: vl-faq-open 0.4s cubic-bezier(0.22,1,0.36,1); }\n@keyframes vl-faq-open {\n  from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); }\n  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }\n}\n@media (prefers-reduced-motion: reduce) { .vl-faq details[open] .vl-faq-answer { animation: none; } }\n\n\/* \u2500\u2500\u2500 Logos marquee \u2500\u2500\u2500 *\/\n.vl-logos-track {\n  display: flex;\n  align-items: center;\n  width: max-content;\n  animation: vl-scroll 33s linear infinite;\n}\n\n.vl-logos-track img {\n  height: 32px;\n  width: auto;\n  max-width: 150px;\n  object-fit: contain;\n  margin-right: 72px;\n  flex-shrink: 0;\n  opacity: 0.6;\n  filter: grayscale(100%);\n  transition: opacity 0.3s, filter 0.3s;\n}\n\n\/* Override espec\u00edfico: el logo de ieTeam tiene mucho aire transparente\n   alrededor de su PNG y queda visualmente peque\u00f1o. Le subimos altura. *\/\n.vl-logos-track img[alt=\"ieTeam\"] {\n  height: 60px;\n  max-width: 210px;\n}\n\n.vl-logos-track img:hover {\n  opacity: 1;\n  filter: grayscale(0%);\n}\n\n\/* \u2500\u2500\u2500 Google rating \u2500\u2500\u2500 *\/\n.vl-google-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  background: #ECECEC;\n  color: #2A2A2A;\n  padding: 12px 24px;\n  border-radius: 100px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.vl-google-badge svg {\n  width: 20px;\n  height: 20px;\n}\n\n.vl-stars {\n  color: #E0A100;\n  letter-spacing: 2px;\n}\n\n\/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .vl-grid-2, .vl-grid-3 {\n    grid-template-columns: 1fr;\n  }\n\n  .vl-section {\n    padding: 64px 0;\n  }\n\n  .vl-hero-flex {\n    flex-direction: column;\n    text-align: center;\n  }\n\n  .vl-hero-actions {\n    justify-content: center;\n  }\n\n  .vl-step-row {\n    flex-direction: column;\n  }\n}\n\n@media (max-width: 600px) {\n  .vl-landing h1 {\n    font-size: 32px;\n  }\n\n  .vl-landing h2 {\n    font-size: 26px;\n  }\n\n  .vl-btn {\n    padding: 14px 24px;\n    font-size: 15px;\n    width: 100%;\n    justify-content: center;\n  }\n\n  .vl-hero-actions {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .vl-card {\n    padding: 28px 24px;\n  }\n}\n\n\/* \u2500\u2500\u2500 Utilidades \u2500\u2500\u2500 *\/\n.vl-text-center { text-align: center; }\n\/* \u2500\u2500\u2500 Mockup Hero: PDF \u2192 IA \u2192 Plantilla \u2500\u2500\u2500 *\/\n.vl-hero-mockup {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0;\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 DROPZONE (siempre visible al inicio) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.vl-mk-dropzone {\n  position: relative;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 96px;\n  padding: 16px;\n  border: 2px dashed #C5C5C5;\n  border-radius: 12px;\n  background: rgba(255,255,255,0.5);\n  margin-bottom: 4px;\n  transition: border-color 0.4s ease, background 0.4s ease;\n  animation: vl-dropzone-soften 0.5s ease-out 1.4s forwards;\n}\n@keyframes vl-dropzone-soften {\n  to {\n    border-color: #ECECEC;\n    background: transparent;\n  }\n}\n\n\/* Hint inicial dentro del dropzone *\/\n.vl-mk-dropzone-hint {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  color: #9A9A9A;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.2px;\n  pointer-events: none;\n  animation: vl-hint-out 0.4s ease-out 1.0s forwards;\n}\n@keyframes vl-hint-out {\n  to { opacity: 0; visibility: hidden; }\n}\n\n\/* PDF que entra desde fuera *\/\n.vl-mk-pdf-wrapper {\n  position: relative;\n  opacity: 0;\n  transform: translate(70px, -50px);\n  animation: vl-pdf-drop 1.0s cubic-bezier(0.34, 1.15, 0.64, 1) 0.45s forwards;\n}\n@keyframes vl-pdf-drop {\n  0%   { opacity: 0; transform: translate(70px, -50px); }\n  30%  { opacity: 1; }\n  100% { opacity: 1; transform: translate(0, 0); }\n}\n.vl-mk-pdf {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: #FFFFFF;\n  border: 1.5px solid #E5E5E5;\n  border-radius: 12px;\n  padding: 12px 16px 12px 12px;\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);\n  transform: rotate(-2deg);\n}\n.vl-mk-pdf-icon { flex-shrink: 0; }\n.vl-mk-pdf-name {\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.2;\n}\n.vl-mk-pdf-size {\n  font-size: 11px;\n  color: #9A9A9A;\n  margin-top: 2px;\n}\n.vl-mk-cursor {\n  position: absolute;\n  bottom: -10px;\n  right: -6px;\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));\n  opacity: 0;\n  animation: vl-cursor-show 0.3s ease-out 0.45s forwards, vl-cursor-bob 2.6s ease-in-out 1.5s infinite;\n}\n@keyframes vl-cursor-show {\n  to { opacity: 1; }\n}\n@keyframes vl-cursor-bob {\n  0%, 100% { transform: translate(0,0); }\n  50%      { transform: translate(-4px,-3px); }\n}\n\n\/* Flechas conectoras \u2014 aparecen despu\u00e9s de la fase anterior *\/\n.vl-mk-arrow {\n  align-self: center;\n  display: flex;\n  justify-content: center;\n  height: 28px;\n  margin: 10px 0;\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.35s ease-out forwards;\n}\n.vl-mk-arrow--1 { animation-delay: 1.55s; }\n.vl-mk-arrow--2 { animation-delay: 2.45s; }\n@keyframes vl-fade-down {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* M\u00e1quina Voicit \u2014 aparece despu\u00e9s de la flecha 1 *\/\n.vl-mk-machine {\n  position: relative;\n  align-self: center;\n  background: #161616;\n  border-radius: 12px;\n  padding: 14px 20px;\n  min-width: 220px;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.4s ease-out 1.85s forwards;\n}\n.vl-mk-machine-pulse {\n  display: none;\n}\n.vl-mk-machine-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.vl-mk-machine-logo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #FFFFFF;\n}\n.vl-mk-machine-logo .vl-mk-gear path { fill: #E7FE15; }\n\n\/* Engranaje girando sobre su propio eje *\/\n.vl-mk-gear {\n  transform-origin: center;\n  transform-box: fill-box;\n  animation: vl-spin 7s linear infinite;\n}\n@keyframes vl-spin {\n  to { transform: rotate(360deg); }\n}\n\n\/* Orbe animado (sustituye al engranaje): peque\u00f1o, colores de marca, en movimiento continuo *\/\n.vl-orb { position: relative; width: 22px; height: 22px; flex-shrink: 0; }\n.vl-orb-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160%; height: 160%; filter: blur(5px); opacity: 0.55; z-index: 0; pointer-events: none; }\n.vl-orb-main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; overflow: hidden; z-index: 1; background: radial-gradient(circle at 50% 45%, #E7FE15, #CDE213 70%); }\n.vl-orb canvas { display: block; width: 100%; height: 100%; }\n\/* Variante del orbe como avatar del chat (paso 2): rellena el c\u00edrculo de 34px *\/\n.vl-orb--avatar { width: 34px; height: 34px; }\n.vl-orb--avatar .vl-orb-glow { filter: blur(4px); opacity: 0.4; width: 135%; height: 135%; }\n\n.vl-mk-machine-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n}\n.vl-mk-dot {\n  flex-shrink: 0;\n  width: 22px;          \/* mismo ancho que el orbe \u2192 su punto queda centrado a 11px (alineado con el orbe)\n                           y el texto \"Analizando\u2026\" empieza a la misma x que \"Agente IA de plantillas\" *\/\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.vl-mk-dot::before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #E7FE15;\n  animation: vl-blink 1.4s ease-in-out infinite;\n}\n@keyframes vl-blink {\n  0%, 100% { opacity: 1; }\n  50%      { opacity: 0.3; }\n}\n\n\/* Shimmer en el texto \"Analizando estructura...\" \u2014 estilo ChatGPT\/Claude *\/\n.vl-mk-shimmer {\n  background: linear-gradient(\n    90deg,\n    rgba(154,154,154,1) 0%,\n    rgba(154,154,154,1) 35%,\n    rgba(255,255,255,1) 50%,\n    rgba(154,154,154,1) 65%,\n    rgba(154,154,154,1) 100%\n  );\n  background-size: 250% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  animation: vl-shimmer 2.2s linear infinite;\n}\n@keyframes vl-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\/* Plantilla generada *\/\n.vl-mk-template {\n  background: #FFFFFF;\n  border: 1.5px solid #E5E5E5;\n  border-radius: 12px;\n  padding: 16px 18px;\n  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.08);\n  opacity: 0;\n  transform: translateY(-4px);\n  animation: vl-fade-down 0.4s ease-out 2.75s forwards;\n}\n.vl-mk-template-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding-bottom: 10px;\n  margin-bottom: 10px;\n  border-bottom: 1px solid #F0F0F0;\n}\n.vl-mk-template-title {\n  font-size: 12.5px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.3;\n}\n.vl-mk-badge-ok {\n  flex-shrink: 0;\n  background: #E7FE15;\n  color: #161616;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 100px;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.vl-mk-section-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.vl-mk-section-list li {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12.5px;\n  color: #424242;\n  font-weight: 500;\n  opacity: 0;\n  animation: vl-li-fade 0.45s ease-out forwards;\n}\n.vl-mk-section-list li:nth-child(1) { animation-delay: 3.1s; }\n.vl-mk-section-list li:nth-child(2) { animation-delay: 3.7s; }\n.vl-mk-section-list li:nth-child(3) { animation-delay: 4.3s; }\n.vl-mk-section-list li:nth-child(4) { animation-delay: 4.9s; }\n.vl-mk-section-list li:nth-child(5) { animation-delay: 5.5s; }\n@keyframes vl-li-fade {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* Texto de cada secci\u00f3n: efecto typewriter de izquierda a derecha *\/\n.vl-mk-section-text {\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 0;\n  animation: vl-typewriter 0.55s steps(24, end) forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-section-text { animation-delay: 3.15s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-section-text { animation-delay: 3.75s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-section-text { animation-delay: 4.35s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-section-text { animation-delay: 4.95s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-section-text { animation-delay: 5.55s; }\n@keyframes vl-typewriter {\n  to { max-width: 260px; }\n}\n\n\/* Config de cada secci\u00f3n (formato + longitud) a la derecha \u2014 estilo paso 3 *\/\n.vl-mk-cfg {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  opacity: 0;\n  animation: vl-cfg-fade 0.4s ease-out forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-cfg { animation-delay: 3.55s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-cfg { animation-delay: 4.15s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-cfg { animation-delay: 4.75s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-cfg { animation-delay: 5.35s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-cfg { animation-delay: 5.95s; }\n@keyframes vl-cfg-fade {\n  from { opacity: 0; transform: scale(0.85); }\n  to   { opacity: 1; transform: scale(1); }\n}\n.vl-mk-cfg-ico {\n  width: 24px; height: 24px;\n  display: inline-flex; align-items: center; justify-content: center;\n  border-radius: 6px;\n  background: #F2F2F2;\n  color: #6E6E6E;\n}\n\/* \u2500\u2500 Bot\u00f3n \"Generar\" del Hero (negro) \u2192 estado \"\u2713 Generado\" (amarillo) \u2500\u2500 *\/\n.vl-mk-genbtn {\n  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;\n  -webkit-appearance: none; appearance: none;\n  background: #161616; color: #FFFFFF;\n  font-size: 10px; font-weight: 700; padding: 4px 12px;\n  border-radius: 100px; letter-spacing: 0.3px; white-space: nowrap;\n  transition: background-color .45s ease, color .45s ease, opacity .35s ease;\n}\n.vl-mk-genbtn.is-generating { opacity: .8; }\n.vl-mk-genbtn.is-done { background: #161616; color: #FFFFFF; animation: vl-genfade .55s ease; }\n.vl-mk-genbtn .vl-gen-tick { color: #E7FE15; font-weight: 800; }\n@keyframes vl-genfade { from { opacity: .45; } to { opacity: 1; } }\n\n\/* \u2500\u2500 Iconos de config como botones + mini-men\u00fa de selecci\u00f3n \u2500\u2500 *\/\n.vl-mk-cfg-ico { border: none; cursor: pointer; font-family: inherit; padding: 0; -webkit-appearance: none; appearance: none; transition: background-color .18s ease, color .18s ease; position: relative; }\n.vl-mk-cfg-ico:hover { background: #E6E6E6; color: #161616; }\n.vl-mk-cfg-ico.is-open { background: #E2E2E2; color: #161616; }\n.vl-mk-cfg-glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }\n.vl-mk-cfg-menu {\n  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;\n  background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 10px;\n  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.28);\n  padding: 5px; min-width: 150px;\n  display: flex; flex-direction: column; gap: 2px;\n  transform-origin: top right; animation: vl-cfgmenu-in .16s ease-out;\n}\n.vl-mk-cfg-menu.vl-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }\n@keyframes vl-cfgmenu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }\n.vl-mk-cfg-opt {\n  display: flex; align-items: center; gap: 9px;\n  padding: 7px 9px; border-radius: 7px; cursor: pointer;\n  font-size: 12px; font-weight: 600; color: #2A2A2A; white-space: nowrap;\n  border: none; background: transparent; width: 100%; text-align: left; font-family: inherit;\n  -webkit-appearance: none; appearance: none;\n}\n.vl-mk-cfg-opt:hover { background: #F4F4F4; }\n.vl-mk-cfg-opt.is-active { background: #F0F0F0; color: #161616; }\n.vl-mk-cfg-opt-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #6E6E6E; flex-shrink: 0; }\n.vl-mk-cfg-opt.is-active .vl-mk-cfg-opt-ico { color: #161616; }\n\n.vl-mk-check {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  font-size: 9px;\n  font-weight: 800;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  opacity: 0;\n  transform: scale(0.4);\n  animation: vl-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.vl-mk-section-list li:nth-child(1) .vl-mk-check { animation-delay: 3.70s; }\n.vl-mk-section-list li:nth-child(2) .vl-mk-check { animation-delay: 4.30s; }\n.vl-mk-section-list li:nth-child(3) .vl-mk-check { animation-delay: 4.90s; }\n.vl-mk-section-list li:nth-child(4) .vl-mk-check { animation-delay: 5.50s; }\n.vl-mk-section-list li:nth-child(5) .vl-mk-check { animation-delay: 6.10s; }\n@keyframes vl-check-pop {\n  to { opacity: 1; transform: scale(1); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 1 \u2014 File picker\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-filepicker {\n  position: relative;\n  background: #FFFFFF;\n  border-radius: 14px;\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\n  border: 1px solid #E8E8E8;\n  max-width: 560px;\n  margin: 0 auto;\n}\n.vl-mk-fp-header {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 16px;\n  border-bottom: 1px solid #EEEEEE;\n  background: #FAFAFA;\n  border-top-left-radius: 14px;\n  border-top-right-radius: 14px;\n}\n.vl-mk-fp-dots { display: flex; gap: 6px; }\n.vl-mk-fp-dots span {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #D8D8D8;\n}\n.vl-mk-fp-dots span:nth-child(1) { background: #FF5F57; }\n.vl-mk-fp-dots span:nth-child(2) { background: #FEBC2E; }\n.vl-mk-fp-dots span:nth-child(3) { background: #28C840; }\n.vl-mk-fp-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #424242;\n}\n.vl-mk-fp-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  padding: 18px;\n}\n.vl-mk-fp-file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border-radius: 10px;\n  background: #F7F7F7;\n  border: 2px solid transparent;\n  cursor: pointer;\n  user-select: none;\n  transition: border-color 0.25s ease, background 0.25s ease;\n  min-width: 0;        \/* permite que el item del grid se encoja y el nombre haga ellipsis *\/\n  overflow: hidden;\n}\n.vl-mk-fp-file:hover {\n  background: #F0F0F0;\n}\n.vl-mk-fp-file.is-selected {\n  background: #EAEAEA;\n  border-color: #161616;\n}\n.vl-mk-fp-name {\n  font-size: 11px;\n  font-weight: 600;\n  color: #2A2A2A;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.vl-mk-fp-actions {\n  padding: 14px 18px 18px;\n  display: flex;\n  justify-content: flex-end;\n}\n.vl-mk-fp-btn {\n  background: #ECECEC;\n  color: #9A9A9A;\n  border: none;\n  border-radius: 8px;\n  padding: 10px 18px;\n  font-size: 13px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: default;\n  transition: background 0.3s ease, color 0.3s ease;\n}\n.vl-mk-fp-btn.is-enabled {\n  background: #161616;\n  color: #FFFFFF;\n  cursor: pointer;\n}\n.vl-mk-fp-btn.is-enabled:hover {\n  background: #2C2C2C;\n}\n\n\/* Toast del Paso 1 \u2014 pop-up desde arriba *\/\n.vl-mk-fp-toast {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  background: #FFFFFF;\n  border: 1px solid #E0E0E0;\n  border-left: 4px solid #E7FE15;\n  border-radius: 10px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  opacity: 0;\n  pointer-events: none;\n  white-space: nowrap;\n  z-index: 10;\n}\n.vl-mk-fp-toast.is-showing {\n  animation: vl-fp-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n}\n.vl-mk-fp-toast.is-hiding {\n  animation: vl-fp-toast-out 0.4s ease-in forwards;\n}\n@keyframes vl-fp-toast-in {\n  from { opacity: 0; transform: translate(-50%, -100%); }\n  to   { opacity: 1; transform: translate(-50%, 0); }\n}\n@keyframes vl-fp-toast-out {\n  from { opacity: 1; transform: translate(-50%, 0); }\n  to   { opacity: 0; transform: translate(-50%, -100%); }\n}\n\n\/* Animaciones \u2014 se disparan al entrar en viewport (.is-visible) *\/\n.vl-mk-filepicker.is-visible .vl-mk-fp-file {\n  opacity: 0;\n  animation: vl-fp-file-in 0.4s ease-out forwards;\n}\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(1) { animation-delay: 0.2s; }\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(2) { animation-delay: 0.35s; }\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(3) { animation-delay: 0.50s; }\n.vl-mk-filepicker.is-visible .vl-mk-fp-file:nth-child(4) { animation-delay: 0.65s; }\n@keyframes vl-fp-file-in {\n  from { opacity: 0; transform: translateY(6px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* La selecci\u00f3n de archivo y la activaci\u00f3n del bot\u00f3n ahora son manuales\n   (gestionadas por JS al hacer click). No hay animaciones autom\u00e1ticas. *\/\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 2 \u2014 Chat con el agente\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-chat {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  max-width: 560px;\n  margin: 0 auto;\n}\n.vl-mk-chat-row {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n  opacity: 0;\n}\n.vl-mk-chat-row--user { justify-content: flex-end; }\n.vl-mk-chat-row--ai   { justify-content: flex-start; }\n\n.vl-mk-chat-avatar {\n  flex-shrink: 0;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  background: #161616;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 2px;\n}\n.vl-mk-chat-avatar svg {\n  display: block;\n  transform: translateY(1.5px);\n}\n.vl-mk-chat-bubble {\n  background: #FFFFFF;\n  border: 1px solid #E8E8E8;\n  border-radius: 14px;\n  padding: 16px 18px;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #2A2A2A;\n  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06);\n  max-width: 88%;\n}\n.vl-mk-chat-bubble--user {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n  border-bottom-right-radius: 4px;\n}\n.vl-mk-chat-bubble--ai {\n  border-bottom-left-radius: 4px;\n}\n\n.vl-mk-chat-pdf-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255,255,255,0.08);\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12.5px;\n  font-weight: 600;\n  color: #FFFFFF;\n}\n\n.vl-mk-chat-intro,\n.vl-mk-chat-question {\n  margin: 0 0 10px;\n  font-weight: 600;\n  color: #161616;\n}\n.vl-mk-chat-question { margin-top: 14px; margin-bottom: 12px; }\n.vl-mk-chat-sections {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n}\n.vl-mk-chat-sections li {\n  position: relative;\n  padding-left: 18px;\n  font-size: 13.5px;\n  font-weight: 600;\n  color: #161616;\n  opacity: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  overflow: hidden;\n}\n.vl-mk-chat-sections li::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 9px;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #E7FE15;\n}\n.vl-mk-chat-section-name {\n  flex: 1;\n}\n\n\/* Bot\u00f3n \u2715 para eliminar secci\u00f3n \u2014 oculto por defecto, visible en modo edici\u00f3n *\/\n.vl-mk-chat-li-delete {\n  display: none;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(0,0,0,0.06);\n  color: #161616;\n  font-size: 11px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  padding: 0;\n  transition: background 0.2s, color 0.2s, transform 0.2s;\n}\n.vl-mk-chat.is-editing .vl-mk-chat-li-delete {\n  display: inline-flex;\n  animation: vl-chat-x-in 0.3s ease-out forwards;\n}\n.vl-mk-chat-li-delete:hover {\n  background: #FCEAEA;\n  color: #DC2626;\n}\n@keyframes vl-chat-x-in {\n  from { opacity: 0; transform: scale(0.5); }\n  to   { opacity: 1; transform: scale(1); }\n}\n\n\/* Animaci\u00f3n al borrar una secci\u00f3n *\/\n.vl-mk-chat-sections li.is-removing {\n  animation: vl-chat-li-remove 0.32s ease-in forwards;\n}\n@keyframes vl-chat-li-remove {\n  to {\n    opacity: 0;\n    max-height: 0;\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    transform: translateX(20px);\n  }\n}\n\n.vl-mk-chat-buttons {\n  display: flex;\n  gap: 8px;\n  margin-top: 4px;\n  flex-wrap: wrap;\n}\n.vl-mk-chat-btn {\n  background: #F2F2F2;\n  color: #424242;\n  border: 1px solid #E5E5E5;\n  border-radius: 100px;\n  padding: 7px 14px;\n  font-size: 12px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n}\n.vl-mk-chat-btn:hover {\n  background: #E5E5E5;\n  border-color: #161616;\n  color: #161616;\n}\n.vl-mk-chat-btn--primary {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n}\n.vl-mk-chat-btn--primary:hover {\n  background: #2C2C2C;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n.vl-mk-chat-btn[disabled],\n.vl-mk-chat-btn:disabled {\n  cursor: default;\n}\n\n\/* Mensaje final \"\u2713 Borrador de plantilla generado\" *\/\n.vl-mk-chat-done {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: #161616;\n  font-weight: 700;\n  font-size: 14px;\n}\n.vl-mk-chat-done svg { flex-shrink: 0; }\n\n\/* Animaciones \u2014 disparadas con .is-visible *\/\n.vl-mk-chat.is-visible .vl-mk-chat-row--user {\n  animation: vl-chat-in-right 0.45s ease-out 0.15s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\n  animation: vl-chat-in-left 0.45s ease-out 0.85s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-response {\n  animation: vl-chat-in-left 0.45s ease-out 2.6s forwards;\n}\n\/* La burbuja de \"pensando\" se desvanece justo antes de aparecer la respuesta *\/\n.vl-mk-chat.is-visible .vl-mk-chat-thinking {\n  animation: vl-chat-in-left 0.45s ease-out 0.85s forwards,\n             vl-chat-fade-out 0.4s ease-in 2.3s forwards;\n}\n@keyframes vl-chat-in-right {\n  from { opacity: 0; transform: translateX(20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes vl-chat-in-left {\n  from { opacity: 0; transform: translateX(-20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes vl-chat-fade-out {\n  to { opacity: 0; height: 0; margin: 0; padding: 0; transform: scaleY(0); transform-origin: top; }\n}\n\n\/* Lista de secciones \u2014 typewriter staggered *\/\n.vl-mk-chat.is-visible .vl-mk-chat-sections li {\n  animation: vl-chat-li-in 0.4s ease-out forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(1) { animation-delay: 3.2s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(2) { animation-delay: 3.6s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(3) { animation-delay: 4.0s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(4) { animation-delay: 4.4s; }\n.vl-mk-chat.is-visible .vl-mk-chat-sections li:nth-child(5) { animation-delay: 4.8s; }\n@keyframes vl-chat-li-in {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* La pregunta y los botones aparecen al final *\/\n.vl-mk-chat-question {\n  opacity: 0;\n}\n.vl-mk-chat-buttons {\n  opacity: 0;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-question {\n  animation: vl-chat-fade-up 0.4s ease-out 5.3s forwards;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-buttons {\n  animation: vl-chat-fade-up 0.4s ease-out 5.6s forwards;\n}\n@keyframes vl-chat-fade-up {\n  from { opacity: 0; transform: translateY(4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* La intro \"He detectado...\" aparece justo cuando la respuesta entra *\/\n.vl-mk-chat-intro {\n  opacity: 0;\n}\n.vl-mk-chat.is-visible .vl-mk-chat-intro {\n  animation: vl-chat-fade-up 0.4s ease-out 2.9s forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOCKUP PASO 3 \u2014 Editor de plantilla\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-mk-editor {\n  position: relative;\n  background: #FFFFFF;\n  border-radius: 14px;\n  border: 1px solid #E8E8E8;\n  box-shadow: 0 10px 32px -8px rgba(0,0,0,0.12);\n  max-width: 540px;\n  margin: 0 auto;\n}\n\n\/* Cabecera del editor *\/\n.vl-mk-editor-head {\n  padding: 12px 18px;\n  border-bottom: 1px solid #EEEEEE;\n  background: #FAFAFA;\n  border-radius: 14px 14px 0 0;\n}\n.vl-mk-editor-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n}\n\n\/* Cuerpo con secciones *\/\n.vl-mk-editor-body {\n  padding: 14px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n\/* Secci\u00f3n (estado base = colapsada) *\/\n.vl-mk-editor-section {\n  background: #F7F7F7;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  opacity: 0;\n  transform: translateX(-6px);\n  overflow: hidden;\n  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n}\n.vl-mk-editor-section-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 11px 14px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.2s ease;\n}\n.vl-mk-editor-section-head:hover {\n  background: rgba(0,0,0,0.03);\n}\n.vl-mk-editor-drag {\n  color: #B0B0B0;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: -2px;\n  line-height: 1;\n  user-select: none;\n  cursor: grab;\n  padding: 0 4px;\n  touch-action: none;\n  transition: color 0.2s ease;\n}\n.vl-mk-editor-drag:hover {\n  color: #4B4B4B;\n}\n.vl-mk-editor-section--dragging .vl-mk-editor-drag,\n.vl-mk-editor--is-dragging .vl-mk-editor-drag {\n  cursor: grabbing;\n}\n\n\/* Secci\u00f3n durante el arrastre \u2014 flota con sombra y leve transparencia *\/\n.vl-mk-editor-section--dragging {\n  position: relative;\n  z-index: 50;\n  box-shadow: 0 14px 32px -4px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1);\n  opacity: 0.96;\n  cursor: grabbing;\n  transition: box-shadow 0.15s ease, opacity 0.15s ease;\n}\n.vl-mk-editor--is-dragging {\n  cursor: grabbing;\n}\n.vl-mk-editor-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: #2A2A2A;\n}\n.vl-mk-editor-caret {\n  margin-left: auto;\n  color: #888;\n  font-size: 12px;\n  transition: transform 0.25s ease;\n  transform: rotate(-90deg);\n}\n\n\/* Secci\u00f3n abierta *\/\n.vl-mk-editor-section--open {\n  background: #FFFFFF;\n  border-color: #161616;\n  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.15), 0 0 0 1px #161616;\n}\n.vl-mk-editor-section--open .vl-mk-editor-section-head {\n  background: #F2F2F2;\n}\n.vl-mk-editor-section--open .vl-mk-editor-section-head:hover {\n  background: #ECECEC;\n}\n.vl-mk-editor-section--open .vl-mk-editor-caret {\n  transform: rotate(0deg);\n}\n\n\/* Cuerpo de la secci\u00f3n \u2014 controlado por transition *\/\n.vl-mk-editor-section-body {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  max-height: 0;\n  opacity: 0;\n  padding: 0 14px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;\n}\n.vl-mk-editor-section--open .vl-mk-editor-section-body {\n  max-height: 400px;\n  opacity: 1;\n  padding: 14px;\n}\n\n\/* Caja de instrucciones editable *\/\n.vl-mk-editor-instructions {\n  background: #FAFAFA;\n  border: 1px solid #EEEEEE;\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 12.5px;\n  line-height: 1.55;\n  color: #424242;\n  font-style: italic;\n}\n\n\/* Controles Formato \/ Longitud \u2014 fila compacta: etiqueta EN L\u00cdNEA + iconos peque\u00f1os y planos *\/\n.vl-mk-editor-controls {\n  display: flex;\n  align-items: center;\n  gap: 26px;\n  flex-wrap: wrap;\n  opacity: 1;\n}\n.vl-mk-editor-ctrl-group {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 9px;\n}\n.vl-mk-editor-ctrl-label {\n  font-size: 11.5px;\n  color: #9A9A9A;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n}\n.vl-mk-editor-btn-group {\n  display: flex;\n  gap: 2px;\n}\n.vl-mk-editor-icon-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: #6B6B6B;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease;\n  padding: 0;\n  font-family: inherit;\n}\n.vl-mk-editor-icon-btn svg { width: 16px; height: 16px; }\n.vl-mk-editor-icon-btn:hover {\n  background: #F0F0F0;\n}\n.vl-mk-editor-icon-btn.is-active {\n  background: #ECECEC;\n  color: #161616;\n}\n.vl-mk-editor-icon-btn.is-active:hover {\n  background: #E2E2E2;\n}\n.vl-mk-editor-hash {\n  font-size: 15px;\n  font-weight: 800;\n  font-family: inherit;\n  line-height: 1;\n}\n\n\/* Footer *\/\n.vl-mk-editor-footer {\n  display: flex;\n  gap: 8px;\n  padding: 14px 18px;\n  background: #FFFFFF;\n  justify-content: flex-end;\n  border-radius: 0 0 14px 14px;\n}\n.vl-mk-editor-action {\n  background: #FFFFFF;\n  color: #424242;\n  border: 1px solid #DDDDDD;\n  border-radius: 8px;\n  padding: 8px 14px;\n  font-size: 12.5px;\n  font-weight: 700;\n  font-family: inherit;\n  cursor: pointer;\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n}\n.vl-mk-editor-action:hover {\n  background: #F5F5F5;\n  border-color: #161616;\n  color: #161616;\n}\n.vl-mk-editor-action--primary {\n  background: #161616;\n  color: #FFFFFF;\n  border-color: #161616;\n}\n.vl-mk-editor-action--primary:hover {\n  background: #2C2C2C;\n  border-color: #2C2C2C;\n  color: #FFFFFF;\n}\n\n\/* Toast \u2014 pop-up que entra desde arriba *\/\n.vl-mk-editor-toast {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  background: #FFFFFF;\n  border: 1px solid #E0E0E0;\n  border-left: 4px solid #E7FE15;\n  border-radius: 10px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #161616;\n  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.22);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  opacity: 0;\n  pointer-events: none;\n  white-space: nowrap;\n  z-index: 10;\n}\n\n\/* \u2550\u2550\u2550 ANIMACIONES INICIALES (entrada) \u2014 disparadas con .is-visible \u2550\u2550\u2550 *\/\n\n\/* Las 5 secciones aparecen escalonadas al hacer scroll *\/\n.vl-mk-editor.is-visible .vl-mk-editor-section {\n  animation: vl-ed-section-in 0.4s ease-out forwards;\n}\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(1) { animation-delay: 0.20s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(2) { animation-delay: 0.35s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(3) { animation-delay: 0.50s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(4) { animation-delay: 0.65s; }\n.vl-mk-editor.is-visible .vl-mk-editor-section:nth-child(5) { animation-delay: 0.80s; }\n@keyframes vl-ed-section-in {\n  from { opacity: 0; transform: translateX(-6px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n\n\/* Bot\u00f3n \"Guardar plantilla\" \u2014 pulso al hacer click (controlado por JS) *\/\n\n\/* Toast \u2014 visible cuando tiene .is-showing (controlado por JS) *\/\n@keyframes vl-ed-toast-in {\n  from { opacity: 0; transform: translate(-50%, -100%); }\n  to   { opacity: 1; transform: translate(-50%, 0); }\n}\n@keyframes vl-ed-toast-out {\n  from { opacity: 1; transform: translate(-50%, 0); }\n  to   { opacity: 0; transform: translate(-50%, -100%); }\n}\n.vl-mk-editor-toast.is-showing {\n  animation: vl-ed-toast-in 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n}\n.vl-mk-editor-toast.is-hiding {\n  animation: vl-ed-toast-out 0.4s ease-in forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PAIN CARDS \u2014 Colores e iconos animados en hover\n   Estado base = blanco\/negro. Solo se activa al pasar el rat\u00f3n.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-card--pain {\n  transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;\n}\n.vl-card--pain .vl-icon {\n  transition: background-color 0.4s ease;\n}\n\n\/* Hourglass \u2014 amarillo p\u00e1lido + flip 180\u00b0 *\/\n.vl-card--pain-1 .vl-pain-icon-svg {\n  transform-origin: center;\n  transform-box: fill-box;\n  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);\n}\n.vl-card--pain-1:hover {\n  background-color: #FFF9DB;\n}\n.vl-card--pain-1:hover .vl-icon {\n  background-color: #FCE899;\n}\n.vl-card--pain-1:hover .vl-pain-icon-svg {\n  transform: rotate(180deg);\n}\n\n\/* X mark \u2014 rojo p\u00e1lido + vaiv\u00e9n *\/\n.vl-card--pain-2 .vl-pain-icon-svg {\n  transform-origin: center;\n  transform-box: fill-box;\n}\n.vl-card--pain-2:hover {\n  background-color: #FCEAEA;\n}\n.vl-card--pain-2:hover .vl-icon {\n  background-color: #F5BABA;\n}\n.vl-card--pain-2:hover .vl-pain-icon-svg {\n  animation: vl-pain-wobble 0.55s ease-in-out;\n}\n@keyframes vl-pain-wobble {\n  0%, 100% { transform: rotate(0deg); }\n  20%      { transform: rotate(-14deg); }\n  50%      { transform: rotate(12deg); }\n  75%      { transform: rotate(-6deg); }\n}\n\n\/* Gear \u2014 azul p\u00e1lido + giro continuo (al mismo ritmo que el del hero) *\/\n.vl-card--pain-3 .vl-pain-icon-img {\n  transform-origin: center;\n  animation: vl-pain-spin 7s linear infinite;\n  animation-play-state: paused;\n}\n.vl-card--pain-3:hover {\n  background-color: #EEF5FE;\n}\n.vl-card--pain-3:hover .vl-icon {\n  background-color: #C9DEFC;\n}\n.vl-card--pain-3:hover .vl-pain-icon-img {\n  animation-play-state: running;\n}\n@keyframes vl-pain-spin {\n  to { transform: rotate(360deg); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PAIN CARDS \u2014 PACK DE EFECTOS\n   (spotlight que sigue al cursor + tilt 3D + borde animado +\n    contadores de \"coste\" + iconos vivos en bucle)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@property --vl-bang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }\n\n\/* 1) Spotlight que sigue al cursor sobre la secci\u00f3n *\/\n.vl-pain-section { position: relative; }\n.vl-pain-section::before {\n  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;\n  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -20%), rgba(22,22,22,0.07), transparent 60%);\n  opacity: 0; transition: opacity 0.45s ease;\n}\n.vl-pain-section.is-spot::before { opacity: 1; }\n.vl-pain-section > .vl-container { position: relative; z-index: 1; }\n\n\/* 2) Tilt 3D de la tarjeta bajo el cursor *\/\n.vl-grid-3:has(.vl-card--pain) { perspective: 1100px; }\n.vl-pain-card { position: relative; transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease; }\n\/* Zoom al pasar el rat\u00f3n sobre cada columna del pain (ampl\u00eda todo su contenido) *\/\n.vl-pain-card:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 22px 48px -20px rgba(0,0,0,0.22); }\n.vl-pain-inner { position: relative; z-index: 1; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); will-change: transform; }\n\n\/* 3) Borde animado que recorre el contorno (visible siempre; intenso al hover) *\/\n.vl-pain-card::after {\n  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;\n  background: conic-gradient(from var(--vl-bang), transparent 0deg, transparent 70deg, var(--vl-bcol, rgba(22,22,22,0.55)) 135deg, transparent 200deg, transparent 360deg);\n  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor; mask-composite: exclude;\n  animation: vl-border-rot 6s linear infinite;\n  opacity: 0.7; transition: opacity 0.35s ease; pointer-events: none; z-index: 2;\n}\n.vl-pain-card:hover::after { opacity: 1; }\n@keyframes vl-border-rot { to { --vl-bang: 360deg; } }\n\/* Color del borde animado = tonalidad de cada tarjeta al hacer hover *\/\n.vl-card--pain-1 { --vl-bcol: #E6C24A; }   \/* amarillo (como su hover) *\/\n.vl-card--pain-2 { --vl-bcol: #E89B9B; }   \/* rojo\/rosa *\/\n.vl-card--pain-3 { --vl-bcol: #8FB6F0; }   \/* azul *\/\n\n\/* CONTADOR 100% CSS (sin JS): cuenta al pasar el rat\u00f3n por la tarjeta. Misma t\u00e9cnica @property que el borde. *\/\n@property --vl-hw { syntax: '<integer>'; initial-value: 0; inherits: false; }\n@property --vl-hd { syntax: '<integer>'; initial-value: 0; inherits: false; }\n@property --vl-c  { syntax: '<integer>'; initial-value: 0; inherits: false; }\n@property --vl-t  { syntax: '<integer>'; initial-value: 0; inherits: false; }\n\/* La animaci\u00f3n se define en la base PAUSADA (fill forwards) y solo se REPRODUCE al hacer hover.\n   Al quitar el rat\u00f3n vuelve a pausa, pero como ya lleg\u00f3 al 100%, se queda en el valor final. *\/\n.vl-cntr-hours .vl-cntr-n { counter-reset: hw var(--vl-hw) hd var(--vl-hd); animation: vl-cnt-hours 1.4s linear forwards paused; }\n.vl-cntr-hours .vl-cntr-n::after { content: counter(hw) \",\" counter(hd); }\n.vl-cntr-corr  .vl-cntr-n { counter-reset: c var(--vl-c); animation: vl-cnt-corr 1s linear forwards paused; }\n.vl-cntr-corr  .vl-cntr-n::after { content: counter(c); }\n.vl-cntr-tpl   .vl-cntr-n { counter-reset: t var(--vl-t); animation: vl-cnt-tpl 0.7s linear forwards paused; }\n.vl-cntr-tpl   .vl-cntr-n::after { content: counter(t); }\n.vl-pain-card:hover .vl-cntr-n { animation-play-state: running; }\n@keyframes vl-cnt-hours {\n  0%     { --vl-hw: 0; --vl-hd: 0; }\n  38.46% { --vl-hw: 0; --vl-hd: 9; }\n  38.47% { --vl-hw: 1; --vl-hd: 0; }\n  76.92% { --vl-hw: 1; --vl-hd: 9; }\n  76.93% { --vl-hw: 2; --vl-hd: 0; }\n  100%   { --vl-hw: 2; --vl-hd: 5; }\n}\n@keyframes vl-cnt-corr { from { --vl-c: 0; } to { --vl-c: 14; } }\n@keyframes vl-cnt-tpl  { from { --vl-t: 0; } to { --vl-t: 4; } }\n@media (prefers-reduced-motion: reduce) {\n  .vl-cntr-hours .vl-cntr-n { --vl-hw: 2; --vl-hd: 5; }\n  .vl-cntr-corr  .vl-cntr-n { --vl-c: 14; }\n  .vl-cntr-tpl   .vl-cntr-n { --vl-t: 4; }\n  .vl-cntr-n { animation: none !important; }\n}\n\/* M\u00f3vil\/t\u00e1ctil: sin hover no hay quien dispare el contador \u2192 mostrar el n\u00famero definitivo directamente *\/\n@media (hover: none), (max-width: 1024px) {\n  .vl-cntr-hours .vl-cntr-n { --vl-hw: 2; --vl-hd: 5; }\n  .vl-cntr-corr  .vl-cntr-n { --vl-c: 14; }\n  .vl-cntr-tpl   .vl-cntr-n { --vl-t: 4; }\n  .vl-cntr-n { animation: none !important; }\n  .vl-pain-stat::before { animation: none !important; }\n}\n\n\/* 4) Contador de \"coste\" \u2014 p\u00edldora con punto \"en vivo\" *\/\n.vl-pain-stat {\n  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;\n  font-size: 13.5px; font-weight: 800; color: #161616;\n  background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 100px;\n  padding: 7px 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.2px;\n  box-shadow: 0 3px 12px -5px rgba(0,0,0,0.14);\n}\n.vl-pain-stat::before {\n  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #161616;\n  flex-shrink: 0;\n  \/* PAUSADO por defecto (s\u00f3lido, sin parpadeo). Solo parpadea al hacer hover,\n     un n\u00ba finito de veces que coincide con la duraci\u00f3n del contador \u2192 al terminar, se queda quieto. *\/\n  animation: vl-stat-pulse 0.45s ease-in-out 3 paused;\n}\n.vl-cntr-corr::before { animation-duration: 0.5s;  animation-iteration-count: 2; }  \/* ~1s, como su contador *\/\n.vl-cntr-tpl::before  { animation-duration: 0.35s; animation-iteration-count: 2; }  \/* ~0.7s *\/\n.vl-pain-card:hover .vl-pain-stat::before { animation-play-state: running; }\n@keyframes vl-stat-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }\n\n\/* Entrada al hacer scroll: v\u00eda vl-reveal (IntersectionObserver) en cada tarjeta \u2014 fiable y escalonada. *\/\n.vl-pain-card h3 { margin-bottom: 6px; }\n.vl-pain-card .text-small { line-height: 1.55; }\n.vl-pain-stat { margin-top: 16px; padding: 6px 13px; }\n\n\/* \u2550\u2550\u2550 FORMATO EDITORIAL (sin caja): 3 columnas con divisores, sobrio pero con color SUTIL \u2550\u2550\u2550 *\/\n.vl-pain-section::before { display: none !important; }                 \/* (el spotlight se gestiona aparte) *\/\n.vl-pain-section { padding-top: 104px; padding-bottom: 150px; }        \/* m\u00e1s aire arriba y, sobre todo, abajo *\/\n\/* Mayor separaci\u00f3n entre el encabezado y las tres columnas *\/\n.vl-pain-section > .vl-container > .vl-text-center { margin-bottom: 104px !important; }\n.vl-grid-3:has(.vl-card--pain) { gap: 0; }\n.vl-pain-card {\n  background: transparent !important; border: none !important;\n  box-shadow: none !important; border-radius: 0 !important;\n  padding: 52px 46px !important;                                       \/* mucha m\u00e1s respiraci\u00f3n vertical (arriba y abajo) *\/\n}\n.vl-pain-card:hover { box-shadow: none !important; }\n.vl-pain-card::after { display: none !important; }                      \/* fuera el borde animado de color *\/\n.vl-pain-inner { transform: none !important; }                         \/* fuera el tilt 3D *\/\n.vl-pain-card + .vl-pain-card { border-left: 1px solid #E6E6E6; }      \/* divisores verticales finos *\/\n\/* Icono con color MUY sutil y constante por columna (diferenciaci\u00f3n discreta) *\/\n.vl-pain-card .vl-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; }\n.vl-pain-card .vl-icon svg { width: 28px; height: 28px; }\n.vl-pain-card .vl-icon img { width: 28px; height: 28px; }\n.vl-card--pain-1 .vl-icon { background: #F7F1DF !important; }           \/* amarillo muy p\u00e1lido *\/\n.vl-card--pain-2 .vl-icon { background: #F6E9EA !important; }           \/* rojo muy p\u00e1lido *\/\n.vl-card--pain-3 .vl-icon { background: #E9EFF7 !important; }           \/* azul muy p\u00e1lido *\/\n\/* Hover: tarjeta de CRISTAL (frosted glass) \u2014 deja ver los puntitos del fondo desenfocados, texto m\u00e1s legible *\/\n.vl-card--pain-1:hover, .vl-card--pain-2:hover, .vl-card--pain-3:hover {\n  background: rgba(255,255,255,0.5) !important;\n  -webkit-backdrop-filter: blur(12px) saturate(1.2);\n          backdrop-filter: blur(12px) saturate(1.2);\n  border-radius: 22px !important;\n  border: 1px solid rgba(255,255,255,0.7) !important;\n  box-shadow: 0 24px 54px -24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.8) !important;\n}\n@media (max-width: 900px) {\n  .vl-pain-section { padding-top: 64px; padding-bottom: 64px; }\n  .vl-pain-card { padding: 26px 0 !important; }\n  .vl-pain-card + .vl-pain-card { border-left: none; border-top: 1px solid #E6E6E6; }\n}\n\n\/* 5) Iconos: reloj de arena y \"X\" se animan SOLO al hover (comportamiento original). El engranaje gira en bucle. *\/\n.vl-card--pain-3 .vl-pain-icon-img { animation: vl-pain-spin 9s linear infinite !important; animation-play-state: running !important; }\n\n@media (prefers-reduced-motion: reduce) {\n  .vl-pain-card::after,\n  .vl-card--pain-1 .vl-pain-icon-svg,\n  .vl-card--pain-2 .vl-pain-icon-svg,\n  .vl-card--pain-3 .vl-pain-icon-img { animation: none; }\n  .vl-pain-section::before { display: none; }\n}\n@media (max-width: 900px) {\n  .vl-pain-section::before { display: none; }   \/* sin spotlight en m\u00f3vil *\/\n  .vl-pain-inner { transform: none !important; } \/* sin tilt en m\u00f3vil *\/\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   COMPARATIVA \"Un cambio que notar\u00e1s\"\n   Estilo monocrom\u00e1tico, alineado con el lenguaje de Voicit\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-compare-grid {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 28px;\n  align-items: stretch;\n  max-width: 980px;\n  margin: 0 auto;\n}\n\n.vl-compare-card {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 36px 36px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.vl-compare-card--before {\n  border: 1px solid #E5E5E5;\n  background: #FAFAFA;\n}\n.vl-compare-card--after {\n  border: 1.5px solid #161616;\n  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.08);\n}\n\n\/* Etiqueta \"ANTES\" \/ \"AHORA\" en may\u00fasculas *\/\n.vl-compare-label {\n  display: inline-block;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: #9A9A9A;\n  margin-bottom: 14px;\n}\n.vl-compare-card--after .vl-compare-label {\n  color: #161616;\n}\n\n\/* T\u00edtulo descriptivo *\/\n.vl-compare-title {\n  font-size: 18px;\n  font-weight: 700;\n  color: #161616;\n  line-height: 1.35;\n  margin: 0 0 22px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid #ECECEC;\n}\n.vl-compare-card--after .vl-compare-title {\n  border-bottom-color: #E0E0E0;\n}\n\n\/* Lista de items *\/\n.vl-compare-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.vl-compare-list li {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  font-size: 16px;\n  line-height: 1.55;\n}\n.vl-compare-card--before .vl-compare-list li {\n  color: #6E6E6E;\n}\n.vl-compare-card--after .vl-compare-list li {\n  color: #161616;\n  font-weight: 500;\n}\n\n\/* Guion (em-dash) en la card \"Antes\" \u2014 gris claro *\/\n.vl-compare-dash {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 2px;\n}\n.vl-compare-dash::before {\n  content: '';\n  display: block;\n  width: 12px;\n  height: 2px;\n  background: #C5C5C5;\n  border-radius: 1px;\n}\n\n\/* Check en la card \"Ahora\" \u2014 c\u00edrculo negro con \u2713 amarillo de marca\n   Mismo lenguaje que el check del mockup del Hero *\/\n.vl-compare-check {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: #161616;\n  color: #E7FE15;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 800;\n  line-height: 1;\n  margin-top: 2px;\n}\n\n\/* Flecha de transformaci\u00f3n entre las dos cards *\/\n.vl-compare-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n\/* Responsive: en pantallas peque\u00f1as, apilamos vertical y rotamos la flecha *\/\n@media (max-width: 900px) {\n  .vl-compare-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n    max-width: 540px;\n  }\n  .vl-compare-arrow svg {\n    transform: rotate(90deg);\n  }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   COMPARATIVA \"Antes \/ Ahora\"\n   \u00b7 ESCRITORIO (>1024px): scroll fijado \u2014 la flecha se dibuja y el \"Ahora\" entra al hacer scroll (JS).\n   \u00b7 M\u00d3VIL (\u22641024px): SIN scroll fijado \u2014 se desarrolla de forma natural al entrar en pantalla (IO + CSS).\n   POR DEFECTO TODO VISIBLE (si el JS no corre, no se oculta nada).\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-cmp-section { position: relative; }\n.vl-cmp-track { position: relative; height: 200vh; }\n.vl-cmp-sticky {\n  position: sticky; top: 0; height: 100vh;\n  display: flex; flex-direction: column; justify-content: center;\n  box-sizing: border-box; padding: 40px 0;\n}\n\/* Transiciones BASE (escritorio, dirigidas por scroll: cortas y sin retardo) *\/\n.vl-compare-arrow svg path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.12s linear; }\n.vl-compare-card--after { transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform; }\n.vl-compare-card--after .vl-compare-list li { transition: opacity 0.25s ease, transform 0.25s ease; will-change: opacity, transform; }\n\n\/* M\u00d3VIL: revelado natural escalonado (lo activa el JS a\u00f1adiendo .vl-cmp-prep y luego .is-live) *\/\n.vl-cmp-section.vl-cmp-prep .vl-compare-arrow svg path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease 0.15s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease 0.45s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(1) { transition-delay: 0.95s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(2) { transition-delay: 1.20s; }\n.vl-cmp-section.vl-cmp-prep .vl-compare-card--after .vl-compare-list li:nth-child(3) { transition-delay: 1.45s; }\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-arrow svg path { stroke-dashoffset: 0; }\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-card--after { opacity: 1; transform: none; }\n.vl-cmp-section.vl-cmp-prep.is-live .vl-compare-card--after .vl-compare-list li { opacity: 1; transform: none; }\n\n@media (max-width: 1024px) {\n  \/* Quitamos el scroll fijado: la secci\u00f3n fluye con naturalidad *\/\n  .vl-cmp-track { height: auto; }\n  .vl-cmp-sticky { position: static; height: auto; padding: 16px 0; }\n  .vl-sstep .vl-mk-chat { text-align: left; }                                    \/* el chat del paso 2 no va centrado *\/\n  .vl-compare-card { padding: 22px 20px 24px; }\n  .vl-compare-title { font-size: 16px; padding-bottom: 14px; margin-bottom: 14px; }\n  .vl-compare-list { gap: 12px; }\n  .vl-compare-list li { font-size: 14.5px; }\n}\n\n.vl-mb-8 { margin-bottom: 8px; }\n.vl-mb-12 { margin-bottom: 12px; }\n.vl-mb-16 { margin-bottom: 16px; }\n.vl-mb-24 { margin-bottom: 24px; }\n.vl-mb-32 { margin-bottom: 32px; }\n.vl-mb-48 { margin-bottom: 48px; }\n.vl-mb-64 { margin-bottom: 64px; }\n.vl-mt-32 { margin-top: 32px; }\n.vl-mt-48 { margin-top: 48px; }\n.vl-mt-64 { margin-top: 64px; }\n.vl-gap-16 { gap: 16px; }\n.vl-gap-24 { gap: 24px; }\n.vl-flex { display: flex; }\n.vl-flex-col { flex-direction: column; }\n.vl-items-center { align-items: center; }\n.vl-justify-center { justify-content: center; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUDITOR\u00cdA RESPONSIVE \u2014 tablet vertical y m\u00f3vil\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* \u2500\u2500 TABLET VERTICAL Y M\u00d3VIL (\u2264900px) \u2500\u2500 *\/\n@media (max-width: 900px) {\n  \/* Hero: reducir padding *\/\n  .vl-landing section[style*=\"padding-top:60px\"] {\n    padding-top: 48px !important;\n    padding-bottom: 56px !important;\n  }\n\n  \/* HERO: REORDENAR a vertical (H1 \u2192 p\u00e1rrafo \u2192 mockup \u2192 CTAs \u2192 badge) *\/\n  .vl-hero-flex {\n    flex-direction: column !important;\n    align-items: center !important;\n    text-align: center !important;\n    gap: 28px !important;\n  }\n  \/* Las \"columnas\" inline-styled del hero se aplanan en m\u00f3vil con display:contents,\n     as\u00ed sus hijos pasan a ser flex-items directos de vl-hero-flex y podemos\n     reordenarlos con `order`. *\/\n  .vl-hero-flex > div[style*=\"flex:1.8\"],\n  .vl-hero-flex > div[style*=\"flex:1;min-width:0\"] {\n    display: contents;\n  }\n  \/* Orden visual en m\u00f3vil *\/\n  .vl-hero-flex h1 { order: 1; margin: 0; }\n  .vl-hero-flex p[style*=\"font-size:20px\"] { order: 2; margin: 0; max-width: 560px; }\n  .vl-hero-mockup { order: 3; margin: 0 auto; max-width: 460px; width: 100%; }\n  .vl-hero-flex .vl-hero-actions { order: 4; margin: 0; justify-content: center; }\n  \/* El contenedor del badge Google (el div con margin-top:32px que envuelve el badge) *\/\n  .vl-hero-flex > div > div[style*=\"margin-top:32px\"] {\n    order: 5;\n    margin-top: 0 !important;\n    justify-content: center !important;\n    width: 100%;\n  }\n\n  \/* Carrusel de logos: tama\u00f1os algo menores *\/\n  .vl-logos-track img {\n    height: 28px;\n    max-width: 130px;\n    margin-right: 56px;\n  }\n  .vl-logos-track img[alt=\"ieTeam\"] {\n    height: 50px;\n    max-width: 170px;\n  }\n\n  \/* STEP ROWS \u2014 centrados verticalmente, orden: t\u00edtulo+n\u00ba \u2192 p\u00e1rrafo \u2192 mockup *\/\n  .vl-step-row {\n    flex-direction: column !important;\n    text-align: center !important;\n    align-items: center !important;\n    gap: 28px !important;\n  }\n  .vl-step-row[style*=\"row-reverse\"] { flex-direction: column !important; }\n  .vl-step-row > div { flex: 1 1 100% !important; width: 100%; }\n  \/* La cabecera del paso: n\u00famero ARRIBA, t\u00edtulo DEBAJO (apilados, no en l\u00ednea) *\/\n  .vl-step-row > div > div[style*=\"align-items:center\"][style*=\"gap:16px\"] {\n    flex-direction: column !important;\n    justify-content: center !important;\n    align-items: center !important;\n    gap: 14px !important;\n  }\n  \/* El mockup del paso va al final, debajo del p\u00e1rrafo *\/\n  .vl-step-row > div:has(.vl-mk-filepicker),\n  .vl-step-row > div:has(.vl-mk-chat),\n  .vl-step-row > div:has(.vl-mk-editor) {\n    order: 2;\n  }\n\n  \/* Casos de uso: tablet \u2192 grid de 2 columnas (no 1) para aprovechar mejor el ancho *\/\n  .vl-grid-3 {\n    grid-template-columns: repeat(2, 1fr) !important;\n  }\n  \/* EXCEPCI\u00d3N: el grid de pain points (3 tarjetas) NO debe ir a 2 columnas en\n     tablet \u2014 quedar\u00eda 2+1 con un hueco hu\u00e9rfano. Lo mantenemos en 3 columnas\n     horizontales (como en desktop), que caben bien en iPad vertical. *\/\n  .vl-grid-3:has(.vl-card--pain) {\n    grid-template-columns: repeat(3, 1fr) !important;\n  }\n\n  \/* Comparativa Antes\/Ahora: ya pasa a 1 columna, flecha rotada *\/\n  .vl-compare-card { padding: 28px 28px 32px; }\n\n  \/* Sticky-stack de testimonios activo en tablet vertical (como la referencia):\n     card m\u00e1s estrecha (540 vs 620) \u2192 m\u00e1s l\u00edneas \u2192 m\u00e1s min-height *\/\n  .vl-tstack-cards { max-width: 540px; min-height: 500px; }\n}\n\n\/* \u2500\u2500 M\u00d3VIL (\u2264600px) \u2500\u2500 *\/\n@media (max-width: 600px) {\n  \/* Hero: padding a\u00fan menor *\/\n  .vl-landing section[style*=\"padding-top:60px\"] {\n    padding-top: 36px !important;\n    padding-bottom: 48px !important;\n  }\n\n  \/* H1: m\u00e1s grande de lo que estaba (32 \u2192 36) *\/\n  .vl-landing h1 {\n    font-size: 36px;\n  }\n  .vl-landing h1 br { display: none; }\n\n  \/* P\u00e1rrafo del hero: m\u00e1s peque\u00f1o para crear contraste con H1 *\/\n  .vl-hero-flex p[style*=\"font-size:20px\"] {\n    font-size: 16px !important;\n    line-height: 1.55 !important;\n  }\n\n  \/* Botones: NO full-width \u2014 que tengan su tama\u00f1o natural y queden centrados *\/\n  .vl-btn {\n    width: auto !important;\n    padding: 14px 28px !important;\n  }\n  .vl-hero-actions {\n    flex-direction: row !important;\n    width: auto !important;\n    flex-wrap: wrap;\n    gap: 12px !important;\n    justify-content: center !important;\n  }\n\n  \/* Badge Google: centrado y con padding reducido *\/\n  .vl-google-badge {\n    padding: 11px 18px;\n    font-size: 13.5px;\n  }\n\n  \/* Casos de uso: en m\u00f3vil s\u00ed 1 columna *\/\n  .vl-grid-3 {\n    grid-template-columns: 1fr !important;\n  }\n  \/* Pain points: en m\u00f3vil tambi\u00e9n 1 columna (el :has tiene m\u00e1s especificidad\n     que .vl-grid-3, as\u00ed que hay que sobreescribirlo expl\u00edcitamente aqu\u00ed). *\/\n  .vl-grid-3:has(.vl-card--pain) {\n    grid-template-columns: 1fr !important;\n  }\n\n  \/* Pain points \/ Ventajas grid de 2 \u2192 1 columna ya viene desde 900px *\/\n  .vl-grid-2 {\n    grid-template-columns: 1fr !important;\n  }\n\n  \/* Container: padding lateral m\u00e1s generoso *\/\n  .vl-container, .vl-container--narrow {\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n\n  \/* Hero mockup: 100% del ancho disponible *\/\n  .vl-hero-mockup { max-width: 100%; }\n  .vl-mk-machine { min-width: 200px; padding: 12px 16px; }\n  .vl-mk-template-title { font-size: 12px; }\n\n  \/* Carrusel logos: tama\u00f1os m\u00f3vil *\/\n  .vl-logos-track img {\n    height: 24px;\n    max-width: 110px;\n    margin-right: 40px;\n  }\n  .vl-logos-track img[alt=\"ieTeam\"] {\n    height: 42px;\n    max-width: 140px;\n  }\n\n  \/* File picker (Paso 1): grid 1 col en m\u00f3vil para que los nombres se lean *\/\n  .vl-mk-fp-grid {\n    grid-template-columns: 1fr;\n    padding: 14px;\n  }\n  .vl-mk-fp-file { padding: 10px; }\n  .vl-mk-fp-name { font-size: 11.5px; }\n\n  \/* Chat mockup (Paso 2): burbujas m\u00e1s anchas, menos padding *\/\n  .vl-mk-chat-bubble {\n    padding: 12px 14px;\n    font-size: 13px;\n    max-width: 92%;\n  }\n  .vl-mk-chat-sections li { font-size: 12.5px; }\n\n  \/* Editor (Paso 3): controles apilan verticalmente *\/\n  .vl-mk-editor { max-width: 100%; }\n  .vl-mk-editor-section-head { padding: 10px 12px; }\n  .vl-mk-editor-name { font-size: 12.5px; }\n  .vl-mk-editor-controls {\n    flex-direction: column;\n    gap: 14px;\n  }\n  .vl-mk-editor-action { width: auto; }\n  .vl-mk-editor-toast { font-size: 12px; padding: 9px 14px; }\n\n  \/* Comparativa: padding compacto *\/\n  .vl-compare-card { padding: 24px 22px 28px; }\n  .vl-compare-title { font-size: 16px; padding-bottom: 16px; margin-bottom: 18px; }\n  .vl-compare-list li { font-size: 14.5px; }\n\n  \/* Testimonios: padding compacto en m\u00f3vil (sticky-stack activo en m\u00f3vil como en la referencia) *\/\n  .vl-testimonial--compact { padding: 24px 22px 22px; }\n  .vl-testimonial-text { font-size: 15px; line-height: 1.6; padding-top: 22px; }\n  .vl-tstack-track { height: 280vh; }\n  .vl-tstack-cards { min-height: 480px; }\n\n  \/* CTA final: padding y h2 *\/\n  .vl-landing section[style*=\"background:#161616\"] { padding: 56px 0 !important; }\n\n  \/* Iconos pain points: tama\u00f1o cuadrado m\u00e1s peque\u00f1o *\/\n  .vl-icon { width: 50px; height: 50px; }\n  .vl-icon svg { width: 28px; height: 28px; }\n  .vl-icon img { width: 28px; height: 28px; }\n\n  \/* Avatares de testimonios un pel\u00edn menores *\/\n  .vl-testimonial-avatar { width: 48px; height: 48px; }\n\n  \/* CTA final (p\u00edldora): en m\u00f3vil el H2 (\"Tu primera plantilla, lista en 2 minutos\")\n     y el subt\u00edtulo (\"Empieza gratis\u2026 Sin tarjeta de cr\u00e9dito.\") quedaban con palabras\n     hu\u00e9rfanas en la \u00faltima l\u00ednea (ej.: \"minutos\" o \"cr\u00e9dito\" solas). Reducimos\n     tama\u00f1o y aplicamos text-wrap:balance para conseguir 2 l\u00edneas equilibradas\n     en el H2 y 1 l\u00ednea (o 2 balanceadas en pantallas estrechas) en el subt\u00edtulo.\n     DESKTOP NO CAMBIA. *\/\n  .vl-cta-pill h2 {\n    font-size: 22px !important;\n    line-height: 1.25 !important;\n    text-wrap: pretty;\n    text-wrap: balance;\n  }\n  .vl-cta-pill p {\n    font-size: 15px !important;\n    line-height: 1.45 !important;\n    text-wrap: pretty;\n    text-wrap: balance;\n  }\n}\n\n\/* \u2500\u2500 M\u00d3VIL ESTRECHO (\u2264375px) \u2500\u2500 *\/\n@media (max-width: 375px) {\n  .vl-landing h1 { font-size: 32px; }\n  .vl-landing h2 { font-size: 24px; }\n  .vl-landing h3 { font-size: 19px; }\n  .vl-mk-fp-name { font-size: 10.5px; }\n  .vl-mk-chat-bubble { font-size: 12.5px; padding: 10px 12px; }\n  .vl-btn { padding: 13px 22px !important; font-size: 14px !important; }\n  \/* En pantallas muy estrechas el texto del testimonio se envuelve a 9+ l\u00edneas *\/\n  .vl-tstack-cards { min-height: 540px; }\n\n  \/* CTA final en m\u00f3vil estrecho: a\u00fan m\u00e1s compacto *\/\n  .vl-cta-pill h2 { font-size: 20px !important; }\n  .vl-cta-pill p  { font-size: 14px !important; }\n}\n@media (max-width: 900px) {\n  \/* NORMA BALANCE: ocultar <br> de t\u00edtulos en pantallas estrechas *\/\n  .vl-landing h1 br, .vl-landing h2 br, .vl-landing h3 br { display: none !important; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SCROLL CONGELADO DE LOS 3 PASOS (sticky-steps)\n   La secci\u00f3n se \"pega\" y van pasando los pasos uno a uno.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-ssteps { position: relative; background: #F8F8F8; padding-top: 6vh; }   \/* peque\u00f1o respiro antes del bloque fijo *\/\n\/* El t\u00edtulo de los pasos arranca transparente y se revela con un fundido al hacer scroll (JS controla la opacidad) *\/\n.vl-ssteps-dtitle, .vl-ssteps-progress { will-change: opacity, transform; }\n\/* Esta secci\u00f3n usa un contenedor m\u00e1s ancho para dar aire a las animaciones *\/\n.vl-ssteps .vl-container { max-width: 1340px; width: 100%; }\n\/* T\u00edtulo m\u00f3vil (en flujo normal) oculto en escritorio *\/\n.vl-ssteps-mtitle { display: none; }\n\/* Track: da el \"recorrido\" de scroll. ~135vh por paso. *\/\n.vl-ssteps-track { position: relative; height: 320vh; z-index: 1; }   \/* por delante de la capa de puntos de la secci\u00f3n *\/\n\/* Lo que se queda fijo en pantalla mientras dura el track *\/\n.vl-ssteps-sticky {\n  position: sticky;\n  top: 112px;                      \/* despeja el header fijo del sitio (~75px) + algo de aire extra *\/\n  height: calc(100vh - 112px);\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;   \/* cabecera arriba, no centrada *\/\n  background: #F8F8F8;\n  box-sizing: border-box;\n  padding: 28px 0 32px;\n}\n\/* Indicador de progreso (3 barritas) *\/\n.vl-ssteps-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 56px; }\n.vl-ssteps-progress span {\n  width: 32px; height: 4px; border-radius: 2px;\n  background: #DADADA;\n  transition: background 0.35s ease, width 0.35s ease;\n  position: relative; cursor: pointer;   \/* clicables: llevan a su paso *\/\n}\n\/* Relleno NEGRO que crece de izquierda a derecha seg\u00fan el scroll \u2192 feedback continuo de que el scroll avanza *\/\n.vl-ssteps-progress span::after {\n  content: ''; position: absolute; left: 0; top: 0; bottom: 0;\n  width: calc(var(--fill, 0) * 100%);\n  background: #161616; border-radius: inherit;\n  transition: width 0.12s linear;\n}\n.vl-ssteps-progress span::before { content: ''; position: absolute; inset: -14px -5px; z-index: 1; }  \/* \u00e1rea de click m\u00e1s amplia *\/\n.vl-ssteps-progress span:hover { background: #C8C8C8; }\n.vl-ssteps-progress span.is-active { width: 44px; }   \/* el paso actual es m\u00e1s ancho; el color lo aporta el relleno *\/\n\/* Escenario donde se apilan los 3 paneles *\/\n.vl-ssteps-stage { position: relative; min-height: 500px; }\n\/* Cada paso ocupa todo el escenario; solo el activo se ve *\/\n.vl-sstep {\n  position: absolute; inset: 0;\n  display: flex !important;\n  flex-direction: row !important;  \/* SIEMPRE texto izquierda, animaci\u00f3n derecha *\/\n  align-items: center;\n  gap: 64px;\n  opacity: 0;\n  transform: translateY(24px);\n  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);\n  pointer-events: none;\n}\n.vl-sstep.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }\n.vl-sstep > div { min-width: 0; }\n\/* Texto algo m\u00e1s estrecho, animaci\u00f3n m\u00e1s ancha para no crecer en vertical *\/\n.vl-sstep > div:first-child { flex: 0 1 46% !important; }\n.vl-sstep > div:last-child  { flex: 1 1 54% !important; }\n\/* Texto siempre alineado a la izquierda *\/\n.vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: left; }\n\n@media (max-width: 1024px) {\n  \/* M\u00d3VIL\/TABLET: SIN scroll fijado. Los 3 pasos se apilan en flujo normal, uno tras otro. *\/\n  .vl-ssteps { padding-top: 0; }\n  .vl-ssteps .vl-container { padding-left: 24px; padding-right: 24px; }\n  .vl-ssteps-mtitle { display: block; text-align: center; padding: 40px 24px 8px; }\n  .vl-ssteps-dtitle { display: none; }\n  .vl-ssteps-progress { display: none; }\n  \/* Quitamos el sticky: track y sticky en flujo normal *\/\n  .vl-ssteps-track { height: auto; }\n  .vl-ssteps-sticky { position: static; height: auto; padding: 8px 0 0; background: transparent; }\n  .vl-ssteps-stage { min-height: 0; }\n  \/* Cada paso deja de estar superpuesto (absolute) y pasa a apilarse, siempre visible *\/\n  .vl-sstep {\n    position: static; inset: auto;\n    opacity: 1 !important; transform: none !important; pointer-events: auto;\n    flex-direction: column !important;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 12px;\n    text-align: center;\n    margin: 0 0 56px;\n  }\n  .vl-sstep:last-child { margin-bottom: 0; }\n  .vl-sstep > div:first-child, .vl-sstep > div:last-child { flex: 0 0 auto !important; width: 100%; }\n  .vl-sstep h3, .vl-sstep p, .vl-sstep .vl-mb-16 { text-align: center; }\n  .vl-sstep .vl-mb-16 { justify-content: center; margin-bottom: 6px !important; }\n  .vl-sstep p { font-size: 14.5px; line-height: 1.45; margin-bottom: 2px !important; }\n  .vl-sstep .vl-info-tooltip { display: none; }\n  .vl-ssteps .vl-mk-filepicker, .vl-ssteps .vl-mk-chat, .vl-ssteps .vl-mk-editor { max-width: 420px; margin: 0 auto; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CASOS DE USO \u2014 CONSTELACI\u00d3N INTERACTIVA\n   Nodos redondos unidos por l\u00edneas que se \"dibujan\" al hacer scroll.\n   Hover: resalta el nodo y muestra su descripci\u00f3n.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.vl-constellation { position: relative; max-width: 1040px; margin: 0 auto; min-height: 600px; }\n\/* \u2500\u2500 CAPA DE PUNTOS REUTILIZABLE (Hero, pain y casos de uso) \u2500\u2500\n   Base muy tenue a lo ancho de toda la secci\u00f3n; al mover el rat\u00f3n se iluminan en un radio amplio alrededor del cursor. *\/\n.vl-dots { position: relative; }\n.vl-dots > .vl-container { position: relative; z-index: 1; }\n\/* Cualquier hijo directo (track, container--narrow, mtitle\u2026) por ENCIMA de la capa de puntos *\/\n.vl-dots > *:not(.vl-dots-layer) { position: relative; z-index: 1; }\n.vl-dots-layer {\n  position: absolute; inset: 0; z-index: 0; pointer-events: none;\n  background-image: radial-gradient(#CFCFCF 1.4px, transparent 1.6px);\n  background-size: 24px 24px;\n  opacity: 0.14;                          \/* base muy tenue en todo el ancho *\/\n  transition: opacity 0.4s ease;\n}\n.vl-dots.is-lit .vl-dots-layer {\n  -webkit-mask: radial-gradient(circle 360px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,0.5) 48%, transparent 80%);\n          mask: radial-gradient(circle 360px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,0.5) 48%, transparent 80%);\n  opacity: 0.95;\n}\n.vl-cst-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }\n.vl-cst-line { stroke: #D7D7D7; stroke-width: 1.5; fill: none; opacity: 0; transition: opacity 0.6s ease; }\n.vl-constellation.is-drawn .vl-cst-line { opacity: 1; }\n.vl-cst-node {\n  position: absolute; left: var(--x); top: var(--y);\n  width: 152px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;\n  z-index: 2; opacity: 0; transform: translate(-50%,-50%) scale(0.55);\n  transition: opacity 0.6s ease;   \/* el transform lo controla el JS (salida desde el centro + flotaci\u00f3n) *\/\n}\n.vl-constellation.is-drawn .vl-cst-node { opacity: 1; }\n\/* fallback sin JS \/ reduced-motion: posici\u00f3n final *\/\n.vl-constellation.is-drawn .vl-cst-node { transform: translate(-50%,-50%) scale(1); }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"0\"] { transition-delay: 0s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"1\"] { transition-delay: 0.08s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"2\"] { transition-delay: 0.16s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"3\"] { transition-delay: 0.24s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"4\"] { transition-delay: 0.32s; }\n.vl-constellation.is-drawn .vl-cst-node[data-i=\"5\"] { transition-delay: 0.40s; }\n.vl-cst-dot {\n  position: relative; overflow: hidden;\n  width: 86px; height: 86px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  \/* Volumen de esfera: brillo arriba + sombra interior abajo + sombra de apoyo *\/\n  box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 10px 24px -10px rgba(0,0,0,0.20);\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\n}\n\/* Reflejo glossy en la esquina superior \u2192 aspecto de burbuja\/esfera *\/\n.vl-cst-dot::before {\n  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none;\n  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.92), rgba(255,255,255,0.25) 40%, rgba(255,255,255,0) 62%);\n}\n.vl-cst-dot svg { width: 38px; height: 38px; position: relative; z-index: 1; }\n.vl-cst-label { font-size: 15px; font-weight: 700; color: #161616; line-height: 1.25; margin: 0; }\n.vl-cst-desc {\n  position: absolute; top: calc(100% + 10px); left: 50%;\n  transform: translateX(-50%) translateY(4px);\n  width: 214px; background: #161616; color: #FFFFFF;\n  font-size: 12.5px; line-height: 1.45; padding: 10px 13px; border-radius: 10px;\n  opacity: 0; pointer-events: none; z-index: 5;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.vl-cst-node--up .vl-cst-desc { top: auto; bottom: calc(100% + 10px); }\n.vl-cst-node:hover { z-index: 6; }\n.vl-cst-node:hover .vl-cst-dot { transform: scale(1.12); box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 18px 36px -12px rgba(0,0,0,0.28); }\n.vl-cst-node:hover .vl-cst-desc { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n@media (max-width: 1024px) {\n  \/* Sin hover en tablet\/m\u00f3vil: rejilla simple con icono + t\u00edtulo + descripci\u00f3n siempre visible *\/\n  .vl-constellation { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }\n  .vl-dots-layer { display: none; }\n  .vl-cst-svg { display: none; }\n  .vl-cst-node { position: static; transform: none !important; opacity: 1 !important; width: auto; transition: none; }\n  \/* En vertical mostramos solo icono + t\u00edtulo; ocultamos la descripci\u00f3n *\/\n  .vl-cst-desc { display: none !important; }\n  .vl-cst-node:hover .vl-cst-dot { transform: none; box-shadow: inset 0 9px 14px -8px rgba(255,255,255,0.85), inset 0 -12px 17px -8px rgba(0,0,0,0.16), 0 10px 24px -10px rgba(0,0,0,0.20); }\n}\n\n\/* \u2550\u2550\u2550 TIRA DE PROCESO: flechas (chevrons) encadenadas con icono + etiqueta dentro \u2550\u2550\u2550 *\/\n.vl-chevflow { display: flex; margin-top: 66px; position: relative; padding-bottom: 96px; }   \/* m\u00e1s aire respecto al t\u00edtulo; hueco para la tarjeta del mensaje *\/\n\/* El relleno de la flecha va en ::after (la flecha en s\u00ed NO se recorta, para que la sombra\n   pueda asomar por todo el contorno: muesca izquierda y punta derecha incluidas). *\/\n.vl-chev {\n  position: relative; flex: 1 1 0; min-width: 0;\n  display: flex; align-items: center; gap: 11px;\n  height: 80px; padding: 0 14px 0 58px;\n  margin-left: -24px;\n  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;\n}\n.vl-chev::after {\n  content: ''; position: absolute; inset: 0; z-index: 1;\n  background: #FFFFFF;\n  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);\n  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.08));\n  transition: background 0.3s ease, filter 0.32s ease;\n}\n.vl-chev:first-child { margin-left: 0; padding-left: 58px; }\n.vl-chev:first-child::after {\n  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);\n}\n.vl-chev:nth-child(1) { z-index: 6; }\n.vl-chev:nth-child(2) { z-index: 5; }\n.vl-chev:nth-child(3) { z-index: 4; }\n.vl-chev:nth-child(4) { z-index: 3; }\n.vl-chev:nth-child(5) { z-index: 2; }\n\/* Foco: la etapa enfocada (clase .vl-on puesta por JS, no por :hover puro \u2014 as\u00ed sigue\n   marcada aunque el rat\u00f3n baje hacia la tarjeta) se ti\u00f1e de su pastel, se ampl\u00eda y gana\n   una sombra marcada que rodea todo su contorno; las dem\u00e1s se aten\u00faan. *\/\n.vl-chevflow.vl-has-focus .vl-chev { opacity: 0.32; }\n.vl-chevflow.vl-has-focus .vl-chev.vl-on { opacity: 1; z-index: 10; transform: scale(1.04); transform-origin: 50% 100%; }\n.vl-chev.vl-on::after {\n  filter: drop-shadow(0 4px 13px rgba(0,0,0,0.18)) drop-shadow(0 0 5px rgba(0,0,0,0.13));\n}\n\/* Cada etapa estrena su propio pastel al enfocarse (amarillo \u2192 azul \u2192 lila \u2192 verde \u2192 rosa) *\/\n.vl-chev:nth-child(1).vl-on::after { background: #FBEFB0; }\n.vl-chev:nth-child(2).vl-on::after { background: #DCEAF9; }\n.vl-chev:nth-child(3).vl-on::after { background: #E7DBFA; }\n.vl-chev:nth-child(4).vl-on::after { background: #D6EFD9; }\n.vl-chev:nth-child(5).vl-on::after { background: #FAD9DE; }\n.vl-chev-ico { position: relative; z-index: 2; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }\n.vl-chev-ico svg { width: 29px; height: 29px; }\n\/* N\u00famero de paso (1..5) a la izquierda del icono \u2192 se lee como una cadena de pasos *\/\n.vl-chev-num {\n  position: absolute; left: 33px; top: 50%; transform: translateY(-50%); z-index: 3;\n  width: 20px; height: 20px; border-radius: 50%;\n  background: #161616; color: #FFFFFF;\n  font-size: 10.5px; font-weight: 800; line-height: 1;\n  display: flex; align-items: center; justify-content: center;\n}\n.vl-chev-label { position: relative; z-index: 2; font-size: 15.5px; font-weight: 700; color: #161616; line-height: 1.18; }\n\/* Tarjeta del mensaje: aparece SOLO al pasar el rat\u00f3n, posicionada por JS justo debajo de la etapa enfocada (alineada en X) *\/\n.vl-chev-caption {\n  position: absolute; top: 84px; left: 0;\n  width: max-content; max-width: 340px; padding: 14px 22px;\n  background: #FFFFFF; color: #2E2E2E;\n  border: 1px solid #ECECEC; border-radius: 12px;\n  font-size: 15.5px; line-height: 1.45; text-align: center;\n  box-shadow: 0 16px 38px -18px rgba(0,0,0,0.20);\n  opacity: 0; pointer-events: none; z-index: 12;\n  transition: opacity 0.22s ease, left 0.3s cubic-bezier(0.22,1,0.36,1);\n}\n.vl-chev-caption.is-on { opacity: 1; }\n\/* M\u00e1s protagonismo: m\u00e1s aire arriba\/abajo y t\u00edtulo de secci\u00f3n m\u00e1s grande *\/\n.vl-section.vl-casos { padding-top: 140px; padding-bottom: 140px; }\n.vl-casos h2 { font-size: 44px; line-height: 1.12; }\n\n\/* M\u00d3VIL + TABLET (incl. vertical \u22641024px): los chevrons se apilan en vertical, apuntando hacia abajo\n   (en horizontal, 5 flechas no caben por debajo de ~1080px y el texto\/forma se rompen). *\/\n@media (max-width: 1024px) {\n  .vl-chevflow { flex-direction: column; margin-top: 30px; padding-bottom: 0; }\n  .vl-chev {\n    flex: none; width: 100%; height: 64px; margin-left: 0; margin-top: -16px;\n    padding: 0 24px 0 56px; gap: 14px;\n  }\n  .vl-chev::after {\n    clip-path: polygon(0 0, 50% 17px, 100% 0, 100% calc(100% - 17px), 50% 100%, 0 calc(100% - 17px));\n  }\n  .vl-chev:first-child { margin-top: 0; padding-left: 56px; }\n  .vl-chev:first-child::after {\n    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), 50% 100%, 0 calc(100% - 17px));\n  }\n  .vl-chev-num { left: 22px; }\n  .vl-chev-label { font-size: 14px; }\n  .vl-chev-ico svg { width: 26px; height: 26px; }\n  .vl-section.vl-casos { padding-top: 72px; padding-bottom: 72px; }\n  .vl-casos h2 { font-size: 30px; }\n  .vl-chev-caption {\n    position: static; display: none; width: auto; max-width: 100%;\n    left: auto; margin: 20px auto 0; font-size: 15px;\n  }\n  .vl-chev-caption.is-on { display: block; }\n}\n\n\n\/* \u2550\u2550\u2550 M\u00d3VIL VERTICAL: textos resumidos en los pasos 2 y 3 (m\u00e1x. 2 l\u00edneas) \u2550\u2550\u2550 *\/\n.vl-p-short { display: none; }\n@media (max-width: 599px) {\n  .vl-p-full { display: none; }\n  .vl-p-short { display: inline; }\n}\n\n\/* El CTA \"Comenzar gratis\" del header m\u00f3vil ahora es GLOBAL (Code Snippets id 25), no por landing. *\/\n\n\/* \u2550\u2550\u2550 M\u00d3VIL: editor del paso 3 \u2014 al abrir una secci\u00f3n solo se muestra esa (ahorro vertical) \u2550\u2550\u2550 *\/\n.vl-mk-editor-done { display: none; }   \/* el bot\u00f3n \"Listo\" solo existe en m\u00f3vil *\/\n@media (max-width: 1024px) {\n  .vl-mk-editor--solo [data-vl-section]:not(.vl-mk-editor-section--open) { display: none; }\n  .vl-mk-editor-done {\n    display: inline-flex; align-items: center; justify-content: center;\n    align-self: flex-end; margin-top: 6px; padding: 9px 22px;\n    border: none; border-radius: 8px; cursor: pointer;\n    font-size: 13px; font-weight: 700;\n  }\n}\n\n\/* \u2550\u2550\u2550 DISPOSITIVOS T\u00c1CTILES (iPad \/ iPhone): SIN scroll-jacking en NINGUNA secci\u00f3n fija \u2550\u2550\u2550\n   En t\u00e1ctil la barra del navegador se oculta\/muestra al hacer scroll, cambia el alto del viewport\n   y los elementos `sticky` \"vibran\" arriba\/abajo. Esto pasa TODAS las secciones fijas a flujo\n   normal en cualquier ancho\/orientaci\u00f3n (tambi\u00e9n iPad en horizontal >1024px).\n   NO afecta a port\u00e1tiles aunque tengan pantalla t\u00e1ctil: su puntero principal es \"fino\" (trackpad). *\/\n@media (hover: none) and (pointer: coarse) {\n  .vl-ssteps-track, .vl-cmp-track, .vl-tstack-track, .vl-cta-track { height: auto !important; }\n  .vl-ssteps-sticky, .vl-cmp-sticky, .vl-tstack-sticky { position: static !important; height: auto !important; }\n  .vl-cta-sticky { position: static !important; height: auto !important; padding: 60px 0 !important; }\n  .vl-ssteps-progress { display: none !important; }\n  .vl-ssteps-stage { min-height: 0 !important; }\n  .vl-sstep {\n    position: static !important; inset: auto !important;\n    opacity: 1 !important; transform: none !important; pointer-events: auto !important;\n    margin: 0 0 64px !important;\n  }\n  .vl-sstep:last-child { margin-bottom: 0 !important; }\n  .vl-tstack-card {\n    position: static !important; transform: none !important; opacity: 1 !important;\n    transition: none !important; margin: 0 0 18px !important;\n  }\n}\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ENTREVISTAS TELEF\u00d3NICAS \u2014 componentes propios de la landing\n   (reutilizan el chasis del design system: mismos radios, sombras, Manrope)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* \u2014 Tarjeta \"grabaci\u00f3n de llamada\" (hero, demo y pasos) \u2014\n   Chasis CALCADO de los mockups de la referencia (buscador):\n   radius 12px, borde 1.5px #E5E5E5, sombra suave 0 8px 24px -6px rgba(0,0,0,0.08). *\/\n.vl-pm-card{background:#FFFFFF;border:1.5px solid #E5E5E5;border-radius:12px;padding:22px;box-shadow:0 8px 24px -6px rgba(0,0,0,0.08);}\n.vl-pm-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #F0F0F0;margin-bottom:14px;}\n.vl-pm-rec{width:10px;height:10px;border-radius:50%;background:#E84D47;flex-shrink:0;animation:vl-pm-pulse 1.6s ease-out infinite;}\n@keyframes vl-pm-pulse{0%{box-shadow:0 0 0 0 rgba(232,77,71,.45)}70%{box-shadow:0 0 0 8px rgba(232,77,71,0)}100%{box-shadow:0 0 0 0 rgba(232,77,71,0)}}\n.vl-pm-htxt{font-weight:700;font-size:14px;color:#161616;}\n.vl-pm-timer{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:#6E6E6E;background:#F5F5F5;padding:3px 10px;border-radius:100px;}\n\/* FORMA DE ONDA tipo podcast: barras finas verticales grises de alturas variadas,\n   muy juntas y EST\u00c1TICAS, con un cursor de progreso negro que avanza lento (9s en\n   bucle) de izquierda a derecha. Se lee como audio reproduci\u00e9ndose, sin botes. *\/\n.vl-pm-wave{display:flex;align-items:center;gap:2px;height:36px;margin:2px 0 16px;position:relative;overflow:hidden;}\n.vl-pm-wave span{flex:1;background:#C9C9C9;border-radius:1.5px;}\n.vl-pm-wave span:nth-child(14n+1){height:24%}.vl-pm-wave span:nth-child(14n+2){height:52%}.vl-pm-wave span:nth-child(14n+3){height:38%}.vl-pm-wave span:nth-child(14n+4){height:70%}.vl-pm-wave span:nth-child(14n+5){height:46%}.vl-pm-wave span:nth-child(14n+6){height:82%}.vl-pm-wave span:nth-child(14n+7){height:58%}.vl-pm-wave span:nth-child(14n+8){height:34%}.vl-pm-wave span:nth-child(14n+9){height:64%}.vl-pm-wave span:nth-child(14n+10){height:42%}.vl-pm-wave span:nth-child(14n+11){height:28%}.vl-pm-wave span:nth-child(14n+12){height:56%}.vl-pm-wave span:nth-child(14n+13){height:74%}.vl-pm-wave span:nth-child(14n+14){height:40%}\n.vl-pm-wave::after{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;border-radius:2px;background:#161616;animation:vl-pm-cursor 9s linear infinite;}\n@keyframes vl-pm-cursor{0%{left:0}100%{left:calc(100% - 2px)}}\n@keyframes vl-pm-breathe{0%,100%{opacity:.45}50%{opacity:.9}}\n@media (prefers-reduced-motion: reduce){.vl-pm-wave::after{animation:none;left:38%;}}\n\n\/* \u2014 Onda VIVA del hero: cada barra se RELLENA de negro de izquierda a derecha como una\n   marea continua (gradiente cuyo corte --f mueve el JS), sin playhead. \u2014 *\/\n.vl-pm-wave--live span{background:linear-gradient(to right,#161616 var(--f,0%),#DCDCDC var(--f,0%));}\n.vl-pm-wave--live::after{display:none;}   \/* fuera el cursor CSS gen\u00e9rico *\/\n@media (prefers-reduced-motion: reduce){.vl-pm-wave--live span:nth-child(-n+14){--f:100%;}}\n\n\/* \u2014 Ventana de conversaci\u00f3n con scroll (transcripci\u00f3n en directo) \u2014 *\/\n.vl-pm-chatwin{position:relative;overflow:hidden;max-height:172px;}   \/* sin JS \/ reduced: ~2 intervenciones *\/\n.vl-pm-chatscroll{transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform;}\n.vl-pm-msg{margin-bottom:12px;text-align:left;}\n.vl-pm-msg:last-child{margin-bottom:0;}\n.vl-pm-msghead{display:flex;align-items:center;gap:8px;margin-bottom:4px;}\n.vl-pm-ts{font-size:11px;font-weight:600;color:#9A9A9A;font-variant-numeric:tabular-nums;}\n.vl-pm-line{position:relative;display:block;text-align:left;font-size:13px;color:#424242;line-height:1.5;}\n.vl-pm-ghost{visibility:visible;display:block;text-align:left;}       \/* sin JS o con reduced-motion: frases completas *\/\n.vl-pm-typed{position:absolute;top:0;left:0;right:0;display:none;text-align:left;}\n.vl-pm-caret{display:inline-block;width:2px;height:.95em;background:#161616;margin-left:2px;vertical-align:-.12em;animation:vl-pm-caretblink .85s steps(2,start) infinite;}\n@keyframes vl-pm-caretblink{0%,100%{opacity:1}50%{opacity:0}}\n.vl-pm-live .vl-pm-ghost{visibility:hidden;}          \/* el fantasma reserva la altura final: nada se recoloca *\/\n.vl-pm-live .vl-pm-typed{display:block;}\n.vl-pm-spk{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px;}\n.vl-pm-chip{flex-shrink:0;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap;}\n.vl-pm-chip--i{background:#F2F2F2;color:#161616;}\n.vl-pm-chip--c{background:#161616;color:#FFFFFF;}\n.vl-pm-line{font-size:13px;color:#424242;line-height:1.5;padding-top:2px;}\n.vl-pm-status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#161616;background:#F5F5F5;border-radius:100px;padding:8px 15px;margin-top:4px;}\n.vl-pm-status .vl-pm-sdot{width:8px;height:8px;border-radius:50%;background:#161616;animation:vl-pm-blink 1.6s ease-in-out infinite;}\n@keyframes vl-pm-blink{0%,100%{opacity:.25}50%{opacity:.9}}\n\n\/* \u2014 Diarizaci\u00f3n (paso 2): dos pistas separadas (grises, diferenciadas por tono) \u2014 *\/\n.vl-pm-track{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #EDEDED;border-radius:12px;margin-bottom:12px;background:#FCFCFC;}\n.vl-pm-track .vl-pm-mini{display:flex;align-items:center;gap:2.5px;height:26px;flex:1;}\n.vl-pm-track .vl-pm-mini span{flex:1;border-radius:2px;animation:vl-pm-breathe 4.2s ease-in-out infinite;}\n.vl-pm-track--i .vl-pm-mini span{background:#C9C9C9;}\n.vl-pm-track--c .vl-pm-mini span{background:#7A7A7A;}\n.vl-pm-track .vl-pm-mini span:nth-child(1){height:30%}.vl-pm-track .vl-pm-mini span:nth-child(2){height:62%}.vl-pm-track .vl-pm-mini span:nth-child(3){height:40%}.vl-pm-track .vl-pm-mini span:nth-child(4){height:72%}.vl-pm-track .vl-pm-mini span:nth-child(5){height:48%}.vl-pm-track .vl-pm-mini span:nth-child(6){height:34%}.vl-pm-track .vl-pm-mini span:nth-child(7){height:56%}.vl-pm-track .vl-pm-mini span:nth-child(8){height:42%}\n.vl-pm-track .vl-pm-mini span:nth-child(2n){animation-delay:2.1s}\n.vl-pm-tok{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#FFFFFF;background:#161616;border-radius:100px;padding:6px 12px;margin-top:2px;}\n\n\/* \u2014 Tarjeta de informe (paso 3 y demo) \u2014 *\/\n.vl-pm-report{background:#FFFFFF;border:1.5px solid #E5E5E5;border-radius:12px;padding:22px;box-shadow:0 8px 24px -6px rgba(0,0,0,0.08);}\n.vl-pm-rep-head{font-weight:800;font-size:15px;color:#161616;margin-bottom:14px;display:flex;align-items:center;gap:8px;}\n.vl-pm-sec{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F2F2F2;font-size:13.5px;color:#2A2A2A;font-weight:600;}\n.vl-pm-sec:last-of-type{border-bottom:none;}\n.vl-pm-sec .vl-pm-ck{width:18px;height:18px;border-radius:50%;background:#F2F2F2;flex-shrink:0;display:flex;align-items:center;justify-content:center;}\n\n\/* \u2014 Las 4 formas de grabar \u2014 *\/\n.vl-forms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}\n.vl-form-card{background:#FFFFFF;border:1px solid #DCDCDC;border-radius:16px;padding:30px;transition:box-shadow .3s ease,transform .3s ease;}\n.vl-form-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08);transform:translateY(-4px);}\n.vl-form-ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}\n.vl-form-card:nth-child(1) .vl-form-ico{background:#F8F0D2;}\n.vl-form-card:nth-child(2) .vl-form-ico{background:#E6EEFB;}\n.vl-form-card:nth-child(3) .vl-form-ico{background:#EFE7FB;}\n.vl-form-card:nth-child(4) .vl-form-ico{background:#E5F3E8;}\n.vl-form-num{font-size:13px;font-weight:800;color:#9A9A9A;letter-spacing:.04em;}\n.vl-form-card h3{font-size:19px;margin:6px 0 8px;}\n.vl-form-card p{font-size:15px;}\n.vl-form-card p a{color:#046bd2;font-weight:700;text-decoration:none;}\n\n\/* \u2014 Secci\u00f3n dispositivo \u2014 *\/\n.vl-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}\n.vl-dev-grid > div{min-width:0;}\n.vl-dev-imgbox{background:#FFFFFF;border:1.5px solid #E5E5E5;border-radius:12px;padding:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,0,0,0.08);}\n.vl-dev-imgbox img{width:100%;height:auto;border-radius:12px;display:block;max-width:420px;}\n.vl-dev-specs{list-style:none;margin:22px 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;}\n.vl-dev-specs li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:#2A2A2A;line-height:1.45;}\n.vl-dev-specs li svg{flex-shrink:0;margin-top:2px;}\n.vl-dev-price{display:flex;align-items:baseline;gap:12px;margin-bottom:22px;}\n.vl-dev-price strong{font-size:34px;font-weight:800;color:#161616;letter-spacing:-.02em;}\n.vl-dev-price span{font-size:15px;color:#6E6E6E;}\n\n\/* \u2550\u2550\u2550 TIRA DE PERFILES (.vl-segflow) \u2014 variante NO SECUENCIAL de los chevrons \u2550\u2550\u2550\n   PORTADA LITERALMENTE de la referencia (buscador). Mismo lenguaje visual e\n   interaccion que la tira de proceso, pero con fichas INDEPENDIENTES separadas\n   por un gap: sin puntas encadenadas y sin numeros (no son pasos de un proceso). *\/\n.vl-segflow { display: flex; gap: 12px; margin-top: 56px; position: relative; padding-bottom: 100px; }\n.vl-seg {\n  position: relative; flex: 1 1 0; min-width: 0;\n  display: flex; align-items: center; gap: 12px;\n  height: 82px; padding: 0 18px;\n  border-radius: 14px;\n  background: #FFFFFF;\n  box-shadow: 0 3px 9px rgba(0,0,0,0.08);\n  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease,\n              background 0.3s ease, box-shadow 0.32s ease;\n}\n\/* Foco por clases JS (NO :hover puro): asi la ficha sigue marcada aunque el raton\n   baje hacia la tarjeta del mensaje. Ojo con la especificidad: la regla de iluminar\n   debe pesar igual o mas que la de atenuar. *\/\n.vl-segflow.vl-has-focus .vl-seg { opacity: 0.32; }\n.vl-segflow.vl-has-focus .vl-seg.vl-on {\n  opacity: 1; z-index: 10;\n  transform: scale(1.04); transform-origin: 50% 100%;\n  box-shadow: 0 9px 20px rgba(0,0,0,0.16), 0 0 6px rgba(0,0,0,0.10);\n}\n\/* Cada perfil estrena su propio pastel al enfocarse *\/\n.vl-seg:nth-child(1).vl-on { background: #FFE8D6; }\n.vl-seg:nth-child(2).vl-on { background: #E1F4E4; }\n.vl-seg:nth-child(3).vl-on { background: #EEE3F7; }\n.vl-seg:nth-child(4).vl-on { background: #FFF6CC; }\n.vl-seg-ico { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }\n.vl-seg-ico svg { width: 29px; height: 29px; }\n.vl-seg-label { font-size: 15.5px; font-weight: 700; color: #161616; line-height: 1.18; }\n.vl-seg-desc { display: none; }   \/* texto real en el HTML -> TranslatePress SI lo traduce (los data-* NO) *\/\n\/* Tarjeta del mensaje: solo al enfocar, centrada bajo la ficha (posicionada por JS) *\/\n.vl-seg-caption {\n  position: absolute; top: 96px; left: 0;\n  width: max-content; max-width: 340px; padding: 14px 22px;\n  background: #FFFFFF; color: #2E2E2E;\n  border: 1px solid #ECECEC; border-radius: 12px;\n  font-size: 15.5px; line-height: 1.45; text-align: center;\n  box-shadow: 0 16px 38px -18px rgba(0,0,0,0.20);\n  opacity: 0; pointer-events: none; z-index: 12;\n  transition: opacity 0.22s ease, left 0.3s cubic-bezier(0.22,1,0.36,1);\n}\n.vl-seg-caption.is-on { opacity: 1; }\n.vl-perfiles h2 { font-size: 44px; line-height: 1.12; }\n.vl-section.vl-perfiles { padding-top: 140px; padding-bottom: 140px; }\n\n\/* \u2014 Responsive \u2014 *\/\n@media (max-width:1024px){\n  .vl-dev-grid{grid-template-columns:1fr;gap:32px;}\n  \/* MOVIL + TABLET (<=1024px): las fichas se apilan; la tarjeta pasa a flujo normal *\/\n  .vl-segflow { flex-direction: column; gap: 10px; margin-top: 30px; padding-bottom: 0; }\n  .vl-seg { flex: none; width: 100%; height: 68px; padding: 0 20px; }\n  .vl-seg-label { font-size: 14.5px; }\n  .vl-seg-ico svg { width: 26px; height: 26px; }\n  .vl-section.vl-perfiles { padding-top: 72px; padding-bottom: 72px; }\n  .vl-perfiles h2 { font-size: 30px; }\n  .vl-seg-caption {\n    position: static; display: none; width: auto; max-width: 100%;\n    left: auto; margin: 16px auto 0; font-size: 15px;\n  }\n  .vl-seg-caption.is-on { display: block; }\n}\n@media (max-width:768px){\n  .vl-forms-grid{grid-template-columns:1fr;}\n  .vl-dev-specs{grid-template-columns:1fr;}\n  .vl-pm-card,.vl-pm-report{padding:18px;}\n  .vl-dev-price strong{font-size:30px;}\n  .vl-pm-spk{flex-direction:column;gap:5px;}\n  .vl-pm-chip{white-space:normal;}\n}\n@media (max-width:480px){\n  .vl-pm-chip{font-size:11px;padding:3px 8px;}\n  .vl-pm-line{font-size:12.5px;}\n}\n\n<\/style>\n\n<div class=\"vl-landing\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       HERO SECTION\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-dots\" style=\"padding-top:60px;padding-bottom:80px;background:#F8F8F8;\">\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\n    <div class=\"vl-container\">\n\n      <div style=\"display:flex;align-items:center;gap:40px;\" class=\"vl-hero-flex\">\n        <div style=\"flex:1.8;min-width:0;\">\n\n          <h1 class=\"vl-mb-24\">\n            Graba y documenta tus entrevistas telef\u00f3nicas de candidatos\n          <\/h1>\n\n          <p style=\"font-size:20px;color:#424242;max-width:620px;\" class=\"vl-mb-32\">\n            Haz tus entrevistas por tel\u00e9fono con total normalidad. Voicit graba el audio de la llamada, diferencia qui\u00e9n es el candidato y qui\u00e9n el entrevistador, y te devuelve el informe del candidato listo \u2014 sin que tengas que tomar una sola nota.\n          <\/p>\n\n          <div style=\"display:flex;gap:16px;flex-wrap:wrap;\" class=\"vl-hero-actions\">\n            <a href=\"https:\/\/app.voicit.com\/signup\" class=\"vl-btn vl-btn--primary\">Empezar gratis<\/a>\n            <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" class=\"vl-btn vl-btn--secondary\" rel=\"nofollow noopener\" target=\"_blank\">Solicitar demo<\/a>\n          <\/div>\n\n          <div style=\"display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap;\">\n            <a href=\"https:\/\/chromewebstore.google.com\/detail\/voicit-resumen-reuni%C3%B3n-ia\/lekjojhflheocafafpmiiemdiechdnkm\" target=\"_blank\" rel=\"noopener nofollow\" class=\"vl-google-badge\" style=\"text-decoration:none !important;color:#2A2A2A !important;\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"#4285F4\"\/><path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\"\/><path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"#FBBC05\"\/><path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\"\/><\/svg>\n              4.8 de 5 <span class=\"vl-stars\">\u2605\u2605\u2605\u2605\u2605<\/span> +350 rese\u00f1as\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- Columna derecha: tarjeta de llamada grab\u00e1ndose -->\n        <div style=\"flex:1;min-width:0;\">\n          <div class=\"vl-pm-card vl-reveal\" id=\"vl-pm-hero\" role=\"img\" aria-label=\"Grabar entrevista telef\u00f3nica de candidato con Voicit\">\n            <div class=\"vl-pm-head\">\n              <span class=\"vl-pm-rec\" aria-hidden=\"true\"><\/span>\n              <span class=\"vl-pm-htxt\">Entrevista telef\u00f3nica \u00b7 en curso<\/span>\n              <span class=\"vl-pm-timer\" data-pm-timer>04:12<\/span>\n            <\/div>\n            <div class=\"vl-pm-wave vl-pm-wave--live\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n            <div class=\"vl-pm-chatwin\">\n              <div class=\"vl-pm-chatscroll\" data-pm-scroll>\n                <div class=\"vl-pm-msg\" data-ts=\"04:12\">\n                  <div class=\"vl-pm-msghead\"><span class=\"vl-pm-chip vl-pm-chip--i\">Entrevistador (t\u00fa)<\/span><span class=\"vl-pm-ts\">04:12<\/span><\/div>\n                  <span class=\"vl-pm-line\"><span class=\"vl-pm-ghost\">\u00ab\u00bfQu\u00e9 te motivar\u00eda a cambiar de proyecto ahora mismo?\u00bb<\/span><span class=\"vl-pm-typed\" aria-hidden=\"true\"><\/span><\/span>\n                <\/div>\n                <div class=\"vl-pm-msg\" data-ts=\"04:19\">\n                  <div class=\"vl-pm-msghead\"><span class=\"vl-pm-chip vl-pm-chip--c\">Candidato \u00b7 Laura G\u00f3mez<\/span><span class=\"vl-pm-ts\">04:19<\/span><\/div>\n                  <span class=\"vl-pm-line\"><span class=\"vl-pm-ghost\">\u00abBusco un equipo comercial donde crecer y asumir cuenta propia.\u00bb<\/span><span class=\"vl-pm-typed\" aria-hidden=\"true\"><\/span><\/span>\n                <\/div>\n                <div class=\"vl-pm-msg\" data-ts=\"04:31\">\n                  <div class=\"vl-pm-msghead\"><span class=\"vl-pm-chip vl-pm-chip--i\">Entrevistador (t\u00fa)<\/span><span class=\"vl-pm-ts\">04:31<\/span><\/div>\n                  <span class=\"vl-pm-line\"><span class=\"vl-pm-ghost\">\u00ab\u00bfC\u00f3mo organizas tu semana entre visitas y prospecci\u00f3n?\u00bb<\/span><span class=\"vl-pm-typed\" aria-hidden=\"true\"><\/span><\/span>\n                <\/div>\n                <div class=\"vl-pm-msg\" data-ts=\"04:37\">\n                  <div class=\"vl-pm-msghead\"><span class=\"vl-pm-chip vl-pm-chip--c\">Candidato \u00b7 Laura G\u00f3mez<\/span><span class=\"vl-pm-ts\">04:37<\/span><\/div>\n                  <span class=\"vl-pm-line\"><span class=\"vl-pm-ghost\">\u00abBloqueo las ma\u00f1anas para visitas y dejo la prospecci\u00f3n para la tarde.\u00bb<\/span><span class=\"vl-pm-typed\" aria-hidden=\"true\"><\/span><\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       LOGOS DE CONFIANZA\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section style=\"padding:32px 0;border-top:1px solid #F2F2F2;border-bottom:1px solid #F2F2F2;overflow:hidden;\">\n    <div class=\"vl-container vl-text-center\">\n      <p class=\"text-small text-secondary vl-mb-16\" style=\"font-size:14px;color:#9A9A9A;\">Elegida por +1.000 empresas para documentar sus entrevistas<\/p>\n      <div style=\"overflow:hidden;\">\n        <div class=\"vl-logos-track\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/Telefonica_2021_logo-1.png\" alt=\"Telef\u00f3nica\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/deloitte-logo-1.png\" alt=\"Deloitte\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/PcComponentes-1.png\" alt=\"PcComponentes\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2023\/02\/2560px-Mahou-san_miguel_logo-1.png\" alt=\"Mahou San Miguel\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/brandty_gris.webp\" alt=\"Brandty\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/08\/logo_ieteam_grises_.webp\" alt=\"ieTeam\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  \n\n  \n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       PROBLEMA \/ PAIN POINTS\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-pain-section vl-dots\">\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-64 vl-reveal\">\n        <h2 class=\"vl-mb-16\" style=\"max-width:920px;margin-left:auto;margin-right:auto;\">Documentar una entrevista telef\u00f3nica no deber\u00eda ser elegir entre escuchar o escribir<\/h2>\n      <\/div>\n\n      <div class=\"vl-grid-3\">\n        <div class=\"vl-card vl-card--pain vl-card--pain-1 vl-pain-card vl-reveal vl-reveal-delay-1\">\n          <div class=\"vl-pain-inner\">\n          <div class=\"vl-icon vl-icon--light vl-mb-24\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M3 22l14-14 5 5L8 27l-6 1 1-6z\" fill=\"#1A171B\"\/><rect x=\"19.5\" y=\"4.5\" width=\"6\" height=\"6\" rx=\"1.5\" transform=\"rotate(45 22.5 7.5)\" fill=\"#1A171B\"\/><rect x=\"3\" y=\"29\" width=\"26\" height=\"2.4\" rx=\"1.2\" fill=\"#1A171B\"\/><\/svg><\/div>\n          <h3 class=\"vl-mb-8\">O escuchas, o tomas notas<\/h3>\n          <p class=\"text-small\">Mientras apuntas lo importante, dejas de prestar atenci\u00f3n al candidato. Y al rev\u00e9s.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"vl-card vl-card--pain vl-card--pain-2 vl-pain-card vl-reveal vl-reveal-delay-2\">\n          <div class=\"vl-pain-inner\">\n          <div class=\"vl-icon vl-icon--light vl-mb-24\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"12\" y=\"3\" width=\"8\" height=\"15\" rx=\"4\" fill=\"#1A171B\"\/><path d=\"M8 15a8 8 0 0 0 16 0\" stroke=\"#1A171B\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\"\/><rect x=\"15\" y=\"24\" width=\"2\" height=\"5\" fill=\"#1A171B\"\/><rect x=\"10\" y=\"28.5\" width=\"12\" height=\"2.4\" rx=\"1.2\" fill=\"#1A171B\"\/><path d=\"M4 4l24 24\" stroke=\"#E84D47\" stroke-width=\"2.6\" stroke-linecap=\"round\"\/><\/svg><\/div>\n          <h3 class=\"vl-mb-8\">Sin grabaci\u00f3n, no hay registro<\/h3>\n          <p class=\"text-small\">Cuando cuelgas solo queda tu memoria y cuatro notas sueltas. Nada objetivo que compartir con el cliente o el equipo.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"vl-card vl-card--pain vl-card--pain-3 vl-pain-card vl-reveal vl-reveal-delay-3\">\n          <div class=\"vl-pain-inner\">\n          <div class=\"vl-icon vl-icon--light vl-mb-24\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"4\" y=\"2\" width=\"24\" height=\"4\" rx=\"1\" fill=\"#1A171B\"\/><rect x=\"4\" y=\"26\" width=\"24\" height=\"4\" rx=\"1\" fill=\"#1A171B\"\/><path d=\"M8 6h16v4l-5.5 6L24 22v4H8v-4l5.5-6L8 10V6z\" fill=\"#1A171B\"\/><rect x=\"11\" y=\"22\" width=\"10\" height=\"3\" rx=\"0.5\" fill=\"#F2F2F2\"\/><\/svg><\/div>\n          <h3 class=\"vl-mb-8\">Redactar el informe a mano lleva horas<\/h3>\n          <p class=\"text-small\">Reconstruir la conversaci\u00f3n, transcribirla y darle formato te roba el tiempo que necesitas para entrevistar.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SOLUCI\u00d3N \u2014 C\u00f3mo funciona (3 pasos)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section--alt vl-ssteps\">\n\n    <div class=\"vl-ssteps-mtitle vl-container\">\n      <h2 style=\"margin:0 auto;\">De la llamada al informe del candidato en 3 pasos<\/h2>\n    <\/div>\n    <div class=\"vl-ssteps-track\">\n      <div class=\"vl-ssteps-sticky\">\n        <div class=\"vl-container\">\n\n          <div class=\"vl-text-center vl-mb-32 vl-ssteps-dtitle\">\n            <h2 style=\"margin:0 auto;\">De la llamada al informe del candidato en 3 pasos<\/h2>\n          <\/div>\n\n          <div class=\"vl-ssteps-progress\">\n            <span data-sstep-dot=\"0\"><\/span><span data-sstep-dot=\"1\"><\/span><span data-sstep-dot=\"2\"><\/span>\n          <\/div>\n\n          <div class=\"vl-ssteps-stage\">\n\n      <!-- Paso 1 -->\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"0\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">1<\/div>\n            <h3>Graba la entrevista telef\u00f3nica<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\">Llama al candidato como siempre. Activa Voicit y la llamada queda grabada \u00edntegra, con la voz del candidato y la tuya. Da igual si llamas desde el m\u00f3vil, desde el ordenador o desde el navegador: hay una forma para cada caso.<\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <div class=\"vl-pm-card\">\n            <div class=\"vl-pm-head\">\n              <span class=\"vl-pm-rec\" aria-hidden=\"true\"><\/span>\n              <span class=\"vl-pm-htxt\">Grabando llamada<\/span>\n              <span class=\"vl-pm-timer\">03:20<\/span>\n            <\/div>\n            <div class=\"vl-pm-wave\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n            <div class=\"vl-pm-spk\"><span class=\"vl-pm-chip vl-pm-chip--i\">Entrevistador (t\u00fa)<\/span><span class=\"vl-pm-line\">Micr\u00f3fono del equipo<\/span><\/div>\n            <div class=\"vl-pm-spk\"><span class=\"vl-pm-chip vl-pm-chip--c\">Candidato<\/span><span class=\"vl-pm-line\">Audio de la llamada<\/span><\/div>\n            <span class=\"vl-pm-status\"><span class=\"vl-pm-sdot\" aria-hidden=\"true\"><\/span>Las dos partes quedan grabadas<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Paso 2 -->\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"1\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">2<\/div>\n            <h3>La IA diferencia candidato y entrevistador<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\"><span class=\"vl-p-full\">Voicit separa autom\u00e1ticamente las dos voces de la llamada (diarizaci\u00f3n): sabe en todo momento qui\u00e9n es el candidato y qui\u00e9n el entrevistador, para que el informe atribuya cada respuesta a quien corresponde.<\/span><span class=\"vl-p-short\">Voicit separa las dos voces de la llamada y atribuye cada respuesta a quien corresponde.<\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <div class=\"vl-pm-card\">\n            <div class=\"vl-pm-track vl-pm-track--i\">\n              <span class=\"vl-pm-chip vl-pm-chip--i\">Entrevistador<\/span>\n              <span class=\"vl-pm-mini\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/span>\n            <\/div>\n            <div class=\"vl-pm-track vl-pm-track--c\">\n              <span class=\"vl-pm-chip vl-pm-chip--c\">Candidato<\/span>\n              <span class=\"vl-pm-mini\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/span>\n            <\/div>\n            <span class=\"vl-pm-tok\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#E7FE15\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>Voces separadas: 2 interlocutores<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Paso 3 -->\n      <div class=\"vl-step-row vl-sstep\" data-sstep=\"2\">\n        <div style=\"flex:1;\">\n          <div style=\"display:flex;align-items:center;gap:16px;\" class=\"vl-mb-16\">\n            <div class=\"vl-step-number\">3<\/div>\n            <h3>Recibe el informe autom\u00e1tico del candidato<\/h3>\n          <\/div>\n          <p class=\"vl-mb-16\"><span class=\"vl-p-full\">En segundos tienes la transcripci\u00f3n y el informe estructurado por secciones \u2014trayectoria, competencias, motivaci\u00f3n, expectativas\u2014 con el mismo detalle que si lo hubieras redactado a mano, listo para tu plantilla y tu cliente.<\/span><span class=\"vl-p-short\">En segundos tienes la transcripci\u00f3n y el informe estructurado por secciones, listo para tu cliente.<\/span><\/p>\n        <\/div>\n        <div style=\"flex:1;\">\n          <div class=\"vl-pm-report\">\n            <div class=\"vl-pm-rep-head\">\u2728 Informe de entrevista \u2014 Laura G\u00f3mez<\/div>\n            <div class=\"vl-pm-sec\"><span class=\"vl-pm-ck\" aria-hidden=\"true\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Trayectoria profesional<\/div>\n            <div class=\"vl-pm-sec\"><span class=\"vl-pm-ck\" aria-hidden=\"true\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Competencias<\/div>\n            <div class=\"vl-pm-sec\"><span class=\"vl-pm-ck\" aria-hidden=\"true\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Motivaci\u00f3n por el cambio<\/div>\n            <div class=\"vl-pm-sec\"><span class=\"vl-pm-ck\" aria-hidden=\"true\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Expectativas<\/div>\n            <div class=\"vl-pm-sec\"><span class=\"vl-pm-ck\" aria-hidden=\"true\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Conclusi\u00f3n<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n          <\/div><!-- \/vl-ssteps-stage -->\n        <\/div><!-- \/vl-container -->\n      <\/div><!-- \/vl-ssteps-sticky -->\n    <\/div><!-- \/vl-ssteps-track -->\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       LAS 4 FORMAS DE GRABAR\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\">\n    <div class=\"vl-container\">\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Graba tus entrevistas telef\u00f3nicas como te venga mejor<\/h2>\n        <p style=\"max-width:680px;margin:0 auto;color:#6E6E6E;\">Cuatro maneras de captar la llamada, para que uses la que encaje con tu forma de trabajar.<\/p>\n      <\/div>\n\n      <div class=\"vl-forms-grid vl-reveal\">\n        <div class=\"vl-form-card\">\n          <div class=\"vl-form-ico\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"9\" y=\"2\" width=\"14\" height=\"24\" rx=\"3\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><circle cx=\"16\" cy=\"22\" r=\"1.6\" fill=\"#1A171B\"\/><path d=\"M25 9c2.5 1.5 2.5 6.5 0 8M28 6c4 3 4 11 0 14\" stroke=\"#1A171B\" stroke-width=\"2.2\" stroke-linecap=\"round\" fill=\"none\"\/><\/svg><\/div>\n          <span class=\"vl-form-num\">01<\/span>\n          <h3>M\u00f3vil en altavoz + app de escritorio<\/h3>\n          <p>Pon el tel\u00e9fono en altavoz y activa el micr\u00f3fono del ordenador desde la app de Voicit. Capta a la vez la voz del candidato que sale del m\u00f3vil y la tuya frente al ordenador. Sin instalar nada en el tel\u00e9fono.<\/p>\n        <\/div>\n        <div class=\"vl-form-card\">\n          <div class=\"vl-form-ico\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"26\" height=\"17\" rx=\"2.5\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><path d=\"M11 27h10M16 22v5\" stroke=\"#1A171B\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/><path d=\"M10 14a6 6 0 0 0 12 0\" stroke=\"#1A171B\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\"\/><rect x=\"14\" y=\"8\" width=\"4\" height=\"7\" rx=\"2\" fill=\"#1A171B\"\/><\/svg><\/div>\n          <span class=\"vl-form-num\">02<\/span>\n          <h3>Llamadas desde el ordenador \u2014 extensi\u00f3n de Chrome<\/h3>\n          <p>\u00bfLlamas con una aplicaci\u00f3n de llamadas en el ordenador? La extensi\u00f3n de Voicit capta el audio interno del equipo (la voz del candidato) y, a la vez, tu micr\u00f3fono. Quedan grabadas las dos partes.<\/p>\n        <\/div>\n        <div class=\"vl-form-card\">\n          <div class=\"vl-form-ico\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"26\" height=\"22\" rx=\"2.5\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><path d=\"M3 10h26\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><circle cx=\"6.5\" cy=\"7.5\" r=\"1\" fill=\"#1A171B\"\/><circle cx=\"9.5\" cy=\"7.5\" r=\"1\" fill=\"#1A171B\"\/><rect x=\"7\" y=\"14\" width=\"10\" height=\"9\" rx=\"1.5\" fill=\"#1A171B\"\/><\/svg><\/div>\n          <span class=\"vl-form-num\">03<\/span>\n          <h3>Llamadas dentro del navegador \u2014 pesta\u00f1a concreta<\/h3>\n          <p>Si la llamada ocurre en una pesta\u00f1a del navegador, selecci\u00f3nala en la extensi\u00f3n y Voicit graba justo esa fuente de audio, sin ruido de fondo.<\/p>\n        <\/div>\n        <div class=\"vl-form-card\">\n          <div class=\"vl-form-ico\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 32 32\" fill=\"none\"><rect x=\"10\" y=\"3\" width=\"12\" height=\"20\" rx=\"3\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><circle cx=\"16\" cy=\"8\" r=\"2\" fill=\"#1A171B\"\/><rect x=\"14\" y=\"12\" width=\"4\" height=\"7\" rx=\"1.5\" fill=\"#1A171B\"\/><path d=\"M16 26v3\" stroke=\"#1A171B\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/><\/svg><\/div>\n          <span class=\"vl-form-num\">04<\/span>\n          <h3>Grabadora f\u00edsica \u2014 sin altavoz y sin ordenador<\/h3>\n          <p>Nuestra grabadora capta el audio del auricular del m\u00f3vil por sus vibraciones: grabas la llamada en privado, sin poner el altavoz y sin depender del ordenador. Al terminar, la conectas por USB y subes la grabaci\u00f3n a Voicit. <a href=\"#dispositivo\">Ver la grabadora \u2192<\/a><\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECCI\u00d3N DISPOSITIVO \u2014 grabadora de llamadas\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt\" id=\"dispositivo\">\n    <div class=\"vl-container\">\n      <div class=\"vl-dev-grid vl-reveal\">\n        <div class=\"vl-dev-imgbox\">\n          <img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2025\/10\/Phone-Call-Recorder.jpg\" alt=\"Grabadora de llamadas para entrevistas telef\u00f3nicas de Voicit\" loading=\"lazy\">\n        <\/div>\n        <div>\n          <h2 class=\"vl-mb-16\">La grabadora de llamadas para entrevistas telef\u00f3nicas<\/h2>\n          <p style=\"color:#424242;\">\u00bfPrefieres no usar el altavoz ni el ordenador? Nuestra grabadora de llamadas capta la conversaci\u00f3n directamente del auricular del tel\u00e9fono, por sus vibraciones. Graba la entrevista de forma discreta, la conectas por USB y Voicit genera el informe del candidato.<\/p>\n          <ul class=\"vl-dev-specs\">\n            <li><svg width=\"18\" height=\"18\" 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>Hasta 188 h de grabaci\u00f3n<\/li>\n            <li><svg width=\"18\" height=\"18\" 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>8-10 h de autonom\u00eda por carga<\/li>\n            <li><svg width=\"18\" height=\"18\" 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>Graba llamadas telef\u00f3nicas y entrevistas presenciales<\/li>\n            <li><svg width=\"18\" height=\"18\" 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>Formatos MP3 y WAV<\/li>\n            <li><svg width=\"18\" height=\"18\" 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>Se transfiere a Voicit por USB<\/li>\n            <li><svg width=\"18\" height=\"18\" 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>50 g, tama\u00f1o de bolsillo<\/li>\n          <\/ul>\n          <div class=\"vl-dev-price\"><strong>49,99 \u20ac<\/strong><span>Pago \u00fanico, sin suscripci\u00f3n<\/span><\/div>\n          <a href=\"https:\/\/voicit.com\/pricing\/#comprar-dispositivos\" class=\"vl-btn vl-btn--primary\">Comprar grabadora<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CASOS DE USO POR PERFIL (tira .vl-segflow, como la referencia:\n       fichas independientes, sin n\u00fameros \u2014 no es un proceso)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-section--alt vl-dots vl-perfiles\" style=\"background:#F8F8F8;\">\n    <div class=\"vl-dots-layer\" aria-hidden=\"true\"><\/div>\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2 class=\"vl-mb-16\">Pensado para entrevistas de selecci\u00f3n por tel\u00e9fono<\/h2>\n      <\/div>\n\n      <div class=\"vl-segflow vl-reveal\">\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"16\" cy=\"10\" r=\"5\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><path d=\"M6 27c0-5 4.5-8 10-8s10 3 10 8\" stroke=\"#1A171B\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/><path d=\"M22 4l1.5 3 3 1.5-3 1.5L22 13l-1.5-3-3-1.5 3-1.5L22 4z\" fill=\"#1A171B\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Headhunting y Executive Search<\/span>\n          <span class=\"vl-seg-desc\">Documenta las primeras tomas de contacto con perfiles directivos sin distraerte tomando notas.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"5\" y=\"4\" width=\"22\" height=\"24\" rx=\"2.5\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><path d=\"M10 11h12M10 16h12M10 21h7\" stroke=\"#1A171B\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">Recruiting y consultoras de selecci\u00f3n<\/span>\n          <span class=\"vl-seg-desc\">Graba la criba telef\u00f3nica de cada candidato y ten el informe listo para presentar al cliente.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"10\" cy=\"10\" r=\"4\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><circle cx=\"22\" cy=\"10\" r=\"4\" stroke=\"#1A171B\" stroke-width=\"2.4\"\/><path d=\"M3 25c0-4 3.5-6 7-6s7 2 7 6M17 25c0-4 3.5-6 7-6s5 2 5 6\" stroke=\"#1A171B\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">ETTs y trabajo temporal<\/span>\n          <span class=\"vl-seg-desc\">Cuando gestionas decenas de llamadas al d\u00eda, deja que Voicit documente cada una por ti.<\/span>\n        <\/div>\n        <div class=\"vl-seg\">\n          <span class=\"vl-seg-ico\"><svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M16 3l11 6v7c0 7-5 11-11 13-6-2-11-6-11-13V9l11-6z\" stroke=\"#1A171B\" stroke-width=\"2.4\" stroke-linejoin=\"round\"\/><path d=\"M11 16l3.5 3.5L21 12\" stroke=\"#1A171B\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n          <span class=\"vl-seg-label\">RRHH interno<\/span>\n          <span class=\"vl-seg-desc\">Estandariza la criba telef\u00f3nica de tu equipo y guarda un registro objetivo de cada entrevista.<\/span>\n        <\/div>\n        <p class=\"vl-seg-caption\" id=\"vl-seg-cap\"><\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       TESTIMONIOS (muro de rese\u00f1as \u2605\u2605\u2605\u2605\u2605) + CASOS DE \u00c9XITO\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- TESTIMONIOS APROBADOS por Alvaro 2026-07-16 -->\n  <!-- Casos de exito activos (aprobados 2026-07-16) -->\n  \n  <section class=\"vl-section vl-section--alt vl-tstack-section\" style=\"padding:0;\">\n    <div class=\"vl-tstack-track\">\n      <div class=\"vl-tstack-sticky\">\n            <div class=\"vl-wall\" aria-hidden=\"true\" data-nosnippet>\n        <div class=\"vl-wall-inner\"><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra horas cada semana, los res\u00famenes salen clavados.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LM<\/span>Laura M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cImprescindible para mis entrevistas, la IA lo capta todo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CR<\/span>Carlos R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa transcripci\u00f3n es perfecta y el informe sale solo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MG<\/span>Marta G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAntes tardaba media hora; ahora segundos. Brutal.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JS<\/span>Javier S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl mejor asistente para reuniones que he probado.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NP<\/span>Nuria P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes precisos y con mi estilo. 10\/10.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DA<\/span>Diego A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo recomiendo a todo mi equipo de selecci\u00f3n.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">EV<\/span>Elena V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cFunciona incre\u00edble en llamadas y presencial.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PC<\/span>Pablo C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe cambi\u00f3 la forma de documentar candidatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SL<\/span>Sara L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cR\u00e1pido, fiable y muy f\u00e1cil de usar.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">HD<\/span>Hugo D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa calidad de los informes es alt\u00edsima.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AT<\/span>Ana T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cYa no tomo notas a mano. Una maravilla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IR<\/span>Iv\u00e1n R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura cada detalle de la entrevista.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LF<\/span>Luc\u00eda F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSencillo y potente, justo lo que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MB<\/span>Marc B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes salen perfectos en un clic.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CN<\/span>Cristina N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhorro de tiempo enorme en cada proceso.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RM<\/span>Ra\u00fal M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa herramienta que no sab\u00eda que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PG<\/span>Patricia G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cTranscribe y resume mejor que nadie.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SH<\/span>Sergio H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cIndispensable para mi d\u00eda a d\u00eda en RRHH.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">BO<\/span>Beatriz O.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cResultados consistentes y muy profesionales.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00c1J<\/span>\u00c1lvaro J.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPas\u00e9 de odiar los informes a tenerlos en minutos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MS<\/span>Marina S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA entiende mi forma de escribir, incre\u00edble.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">GP<\/span>Gonzalo P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis entrevistas quedan documentadas sin esfuerzo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">TL<\/span>Teresa L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cUna pasada para procesos de selecci\u00f3n largos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AV<\/span>Andr\u00e9s V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCero notas manuales, todo autom\u00e1tico y claro.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CM<\/span>Claudia M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl resumen llega antes de levantarme de la silla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RD<\/span>Rub\u00e9n D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhora dedico el tiempo a las personas, no al papeleo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PR<\/span>Paula R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo usa todo mi equipo, no podr\u00edamos volver atr\u00e1s.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">VA<\/span>V\u00edctor A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPlantillas a mi medida desde el primer d\u00eda.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SC<\/span>Silvia C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura matices que a m\u00ed se me escapaban.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JN<\/span>Jorge N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cProfesional, r\u00e1pido y muy intuitivo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LB<\/span>Lorena B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes nunca hab\u00edan sido tan consistentes.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AG<\/span>Adri\u00e1n G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSe acab\u00f3 reescribir lo mismo una y otra vez.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NF<\/span>Natalia F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa mejor inversi\u00f3n para mi consultora.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DT<\/span>Daniel T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEntrevistas resumidas con todo el contexto.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CH<\/span>Carmen H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cF\u00e1cil de configurar y resultados inmediatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PM<\/span>Pablo M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra una ma\u00f1ana entera de trabajo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">ES<\/span>Eva S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA redacta como lo har\u00eda yo. Impresionante.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00d3L<\/span>\u00d3scar L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cDocumentar candidatos ya no es un dolor.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IV<\/span>Irene V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes fieles, sin perder ning\u00fan detalle.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SP<\/span>Sergio P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra horas cada semana, los res\u00famenes salen clavados.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LM<\/span>Laura M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cImprescindible para mis entrevistas, la IA lo capta todo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CR<\/span>Carlos R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa transcripci\u00f3n es perfecta y el informe sale solo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MG<\/span>Marta G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAntes tardaba media hora; ahora segundos. Brutal.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JS<\/span>Javier S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl mejor asistente para reuniones que he probado.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NP<\/span>Nuria P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes precisos y con mi estilo. 10\/10.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DA<\/span>Diego A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo recomiendo a todo mi equipo de selecci\u00f3n.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">EV<\/span>Elena V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cFunciona incre\u00edble en llamadas y presencial.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PC<\/span>Pablo C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe cambi\u00f3 la forma de documentar candidatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SL<\/span>Sara L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cR\u00e1pido, fiable y muy f\u00e1cil de usar.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">HD<\/span>Hugo D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa calidad de los informes es alt\u00edsima.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AT<\/span>Ana T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cYa no tomo notas a mano. Una maravilla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IR<\/span>Iv\u00e1n R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura cada detalle de la entrevista.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LF<\/span>Luc\u00eda F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSencillo y potente, justo lo que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MB<\/span>Marc B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes salen perfectos en un clic.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CN<\/span>Cristina N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhorro de tiempo enorme en cada proceso.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RM<\/span>Ra\u00fal M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa herramienta que no sab\u00eda que necesitaba.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PG<\/span>Patricia G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cTranscribe y resume mejor que nadie.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SH<\/span>Sergio H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cIndispensable para mi d\u00eda a d\u00eda en RRHH.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">BO<\/span>Beatriz O.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cResultados consistentes y muy profesionales.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00c1J<\/span>\u00c1lvaro J.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPas\u00e9 de odiar los informes a tenerlos en minutos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">MS<\/span>Marina S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA entiende mi forma de escribir, incre\u00edble.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">GP<\/span>Gonzalo P.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis entrevistas quedan documentadas sin esfuerzo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">TL<\/span>Teresa L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cUna pasada para procesos de selecci\u00f3n largos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AV<\/span>Andr\u00e9s V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCero notas manuales, todo autom\u00e1tico y claro.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CM<\/span>Claudia M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEl resumen llega antes de levantarme de la silla.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">RD<\/span>Rub\u00e9n D.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cAhora dedico el tiempo a las personas, no al papeleo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PR<\/span>Paula R.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLo usa todo mi equipo, no podr\u00edamos volver atr\u00e1s.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">VA<\/span>V\u00edctor A.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cPlantillas a mi medida desde el primer d\u00eda.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SC<\/span>Silvia C.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cCaptura matices que a m\u00ed se me escapaban.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">JN<\/span>Jorge N.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cProfesional, r\u00e1pido y muy intuitivo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">LB<\/span>Lorena B.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMis informes nunca hab\u00edan sido tan consistentes.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">AG<\/span>Adri\u00e1n G.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cSe acab\u00f3 reescribir lo mismo una y otra vez.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">NF<\/span>Natalia F.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa mejor inversi\u00f3n para mi consultora.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">DT<\/span>Daniel T.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cEntrevistas resumidas con todo el contexto.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">CH<\/span>Carmen H.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cF\u00e1cil de configurar y resultados inmediatos.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">PM<\/span>Pablo M.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cMe ahorra una ma\u00f1ana entera de trabajo.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">ES<\/span>Eva S.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cLa IA redacta como lo har\u00eda yo. Impresionante.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">\u00d3L<\/span>\u00d3scar L.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cDocumentar candidatos ya no es un dolor.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">IV<\/span>Irene V.<\/div><\/div><div class=\"vl-wall-card\"><div class=\"vl-wall-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><div class=\"vl-wall-txt\">\u201cRes\u00famenes fieles, sin perder ning\u00fan detalle.\u201d<\/div><div class=\"vl-wall-who\"><span class=\"vl-wall-ava\">SP<\/span>Sergio P.<\/div><\/div><\/div>\n      <\/div>\n        <div class=\"vl-container\">\n\n          <div class=\"vl-text-center\" style=\"margin-bottom:56px;\">\n            <h2 class=\"vl-mb-16\">Consultoras que ya documentan sus entrevistas telef\u00f3nicas con Voicit<\/h2>\n          <\/div>\n\n          <div class=\"vl-tstack-cards\">\n\n            <!-- Testimonio 1: H\u00e9ctor Huertas \u2014 Buenpuerto -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"0\">\n              <p class=\"vl-testimonial-text\">\n                Mucha de nuestra selecci\u00f3n arranca por tel\u00e9fono. Antes colgaba y me tocaba reconstruir la conversaci\u00f3n de memoria; ahora la llamada queda grabada y el informe del candidato est\u00e1 hecho antes de mi siguiente entrevista.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/hector-huertas.webp\" alt=\"H\u00e9ctor Huertas, Socio Director de Buenpuerto\" loading=\"lazy\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">H\u00e9ctor Huertas<\/div>\n                  <div class=\"vl-testimonial-role\">Socio Director \u00b7 Buenpuerto<br>+25 a\u00f1os en selecci\u00f3n<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Testimonio 2: I\u00f1aki Goyeneche \u2014 ieTeam -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"1\">\n              <p class=\"vl-testimonial-text\">\n                Las cribas telef\u00f3nicas eran el punto donde m\u00e1s se nos escapaban detalles. Con Voicit el equipo graba cada llamada y todos entregamos el informe con el mismo nivel de detalle, sin depender de lo que cada uno apuntara.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/inaki-goyeneche.webp\" alt=\"I\u00f1aki Goyeneche, Talent Area Manager de ieTeam\" loading=\"lazy\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">I\u00f1aki Goyeneche<\/div>\n                  <div class=\"vl-testimonial-role\">Talent Area Manager \u00b7 ieTeam<br>+24 a\u00f1os en consultor\u00eda de talento<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Testimonio 3: Cristina Muler \u2014 Brandty -->\n            <div class=\"vl-testimonial vl-testimonial--compact vl-tstack-card\" data-tstack-idx=\"2\">\n              <p class=\"vl-testimonial-text\">\n                Poder documentar las entrevistas telef\u00f3nicas igual que las presenciales nos cambi\u00f3 el d\u00eda a d\u00eda. La diferenciaci\u00f3n de voces hace que el informe sea fiel a lo que realmente dijo el candidato.\n              <\/p>\n              <div class=\"vl-testimonial-author\">\n                <div class=\"vl-testimonial-avatar\"><img decoding=\"async\" src=\"https:\/\/voicit.com\/wp-content\/uploads\/2026\/05\/cristina-muler.webp\" alt=\"Cristina Muler, CEO de Brandty\" loading=\"lazy\"><\/div>\n                <div>\n                  <div class=\"vl-testimonial-name\">Cristina Muler<\/div>\n                  <div class=\"vl-testimonial-role\">CEO \u00b7 Brandty<br>Consultora de Selecci\u00f3n<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       EL ANTES Y EL AHORA (comparativa)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section vl-cmp-section\">\n   <div class=\"vl-cmp-track\">\n    <div class=\"vl-cmp-sticky\">\n    <div class=\"vl-container\">\n\n      <div class=\"vl-text-center vl-mb-48\">\n        <h2 class=\"vl-mb-16\">Un cambio que notar\u00e1s desde la primera llamada<\/h2>\n      <\/div>\n\n      <div class=\"vl-compare-grid\">\n\n        <div class=\"vl-compare-card vl-compare-card--before\">\n          <span class=\"vl-compare-label\">Antes<\/span>\n          <h3 class=\"vl-compare-title\">Escuchando y escribiendo a la vez<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li><span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span><span>Tomas notas mientras hablas y se te escapan matices<\/span><\/li>\n            <li><span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span><span>Al colgar, reconstruyes la entrevista de memoria<\/span><\/li>\n            <li><span class=\"vl-compare-dash\" aria-hidden=\"true\"><\/span><span>Cada informe telef\u00f3nico lo redactas desde cero<\/span><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"vl-compare-arrow vl-cmp-after\" aria-hidden=\"true\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\n            <path d=\"M6 16h20m-6-6l6 6-6 6\" pathLength=\"1\" stroke=\"#9A9A9A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"vl-compare-card vl-compare-card--after vl-cmp-after\">\n          <span class=\"vl-compare-label\">Ahora<\/span>\n          <h3 class=\"vl-compare-title\">Con Voicit grabando y redactando por ti<\/h3>\n          <ul class=\"vl-compare-list\">\n            <li><span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span><span>Hablas con el candidato al 100 %, Voicit toma nota por ti<\/span><\/li>\n            <li><span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span><span>La llamada queda grabada y transcrita<\/span><\/li>\n            <li><span class=\"vl-compare-check\" aria-hidden=\"true\">\u2713<\/span><span>El informe se genera solo, con las voces ya diferenciadas<\/span><\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n    <\/div><!-- \/vl-cmp-sticky -->\n   <\/div><!-- \/vl-cmp-track -->\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CTA FINAL (p\u00edldora oscura sobre fondo gris claro)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-cta-section\" style=\"background:#F8F8F8;text-align:center;\">\n   <div class=\"vl-cta-track\">\n    <div class=\"vl-cta-sticky\">\n      <div class=\"vl-container\">\n        <div class=\"vl-cta-pill\" id=\"vl-cta-pill\">\n\n          <h2 class=\"vl-cta-title vl-mb-16\" style=\"color:#161616;\">Documenta cada entrevista telef\u00f3nica sin esfuerzo<\/h2>\n          <p style=\"font-size:18px;color:#424242;max-width:560px;margin:0 auto 28px;\">\n            Empieza gratis. Sin compromiso. Sin tarjeta de cr\u00e9dito.\n          <\/p>\n\n          <div style=\"display:flex;gap:16px;justify-content:center;flex-wrap:wrap;\">\n            <a href=\"https:\/\/app.voicit.com\/signup\" class=\"vl-btn vl-btn--brand\">Empezar gratis<\/a>\n            <a href=\"https:\/\/calendly.com\/alvaroarres\/voicitcall\" class=\"vl-btn vl-btn--secondary\" rel=\"nofollow noopener\" target=\"_blank\">Solicitar demo<\/a>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div><!-- \/vl-cta-sticky -->\n   <\/div><!-- \/vl-cta-track -->\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       FAQ\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"vl-section\">\n    <div class=\"vl-container--narrow\">\n\n      <div class=\"vl-text-center vl-mb-48 vl-reveal\">\n        <h2>Preguntas frecuentes<\/h2>\n      <\/div>\n\n      <div class=\"vl-faq vl-reveal\">\n        <details name=\"vl-faq\">\n          <summary>\u00bfSe puede grabar una entrevista de trabajo por tel\u00e9fono?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. La buena pr\u00e1ctica (y lo que exige el RGPD) es informar a la persona de que la llamada se va a grabar y con qu\u00e9 fin. Voicit es una empresa europea y el tratamiento de los datos es confidencial. Informa al candidato al inicio de la llamada y tendr\u00e1s un registro objetivo del proceso.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfC\u00f3mo grabo una llamada telef\u00f3nica para documentar la entrevista?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Tienes cuatro formas: con el m\u00f3vil en altavoz y la app de escritorio; con la extensi\u00f3n de Chrome captando el audio interno del ordenador; seleccionando la pesta\u00f1a del navegador de la llamada; o con nuestra grabadora f\u00edsica, que capta el auricular por vibraci\u00f3n sin necesidad de altavoz.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfC\u00f3mo diferencia Voicit qui\u00e9n es el candidato y qui\u00e9n el entrevistador?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Mediante diarizaci\u00f3n: la IA separa las voces de la llamada y las atribuye a cada interlocutor, de modo que el informe refleja con fidelidad qu\u00e9 dijo el candidato y qu\u00e9 el entrevistador.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfNecesito poner el tel\u00e9fono en altavoz?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>No necesariamente. Con la app de escritorio s\u00ed se usa el altavoz, pero con la grabadora f\u00edsica captas el sonido del auricular por sus vibraciones, as\u00ed que puedes grabar la llamada en privado.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfFunciona si llamo desde el ordenador o desde el navegador?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Si llamas con una aplicaci\u00f3n de escritorio, la extensi\u00f3n capta el audio interno del equipo; si la llamada ocurre en el navegador, seleccionas esa pesta\u00f1a y Voicit graba esa fuente.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfQu\u00e9 incluye el informe del candidato?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>La transcripci\u00f3n de la llamada y un informe estructurado por secciones (trayectoria, competencias, motivaci\u00f3n, expectativas y conclusi\u00f3n), adaptado a tu <a href=\"https:\/\/voicit.com\/plantillas-informes-candidatos\/\">plantilla de informe de candidato<\/a>.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfNecesito comprar la grabadora?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>No es obligatoria. Solo la necesitas si prefieres grabar sin altavoz y sin ordenador. Se vende aparte por 49,99 \u20ac, pago \u00fanico y sin suscripci\u00f3n.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfEs confidencial grabar y subir las entrevistas?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>S\u00ed. Voicit es una empresa europea y trata los datos conforme al RGPD; las grabaciones y los informes son confidenciales.<\/p>\n          <\/div>\n        <\/details>\n\n        <details name=\"vl-faq\">\n          <summary>\u00bfCu\u00e1nto cuesta Voicit?<\/summary>\n          <div class=\"vl-faq-answer\">\n            <p>Desde 7 \u20ac\/mes, y puedes empezar gratis, sin tarjeta de cr\u00e9dito. Consulta el detalle en la <a href=\"https:\/\/voicit.com\/pricing\/\">p\u00e1gina de precios<\/a>.<\/p>\n          <\/div>\n        <\/details>\n      <\/div>\n\n      <div style=\"text-align:center;margin-top:48px;\">\n        <a href=\"https:\/\/voicit.com\/voicit-faqs\/\" class=\"vl-btn\" style=\"background:#161616 !important;color:#FFFFFF !important;border:none;border-radius:100px;padding:14px 32px;font-weight:700;font-size:15px;text-decoration:none !important;display:inline-flex;align-items:center;\">\n          M\u00e1s dudas aqu\u00ed\n        <\/a>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCHEMA JSON-LD\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Voicit \u2014 Grabar y documentar entrevistas telef\u00f3nicas de candidatos\",\n  \"url\": \"https:\/\/voicit.com\/grabar-entrevistas-telefonicas\/\",\n  \"description\": \"Graba y documenta tus entrevistas telef\u00f3nicas de candidatos. Voicit capta ambas voces, diferencia candidato y entrevistador (diarizaci\u00f3n) y genera el informe del candidato autom\u00e1ticamente con IA.\",\n  \"applicationCategory\": \"BusinessApplication\",\n  \"operatingSystem\": \"Web\",\n  \"inLanguage\": \"es\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"7.00\",\n    \"priceCurrency\": \"EUR\",\n    \"url\": \"https:\/\/voicit.com\/pricing\/\"\n  },\n  \"aggregateRating\": {\n    \"@type\": \"AggregateRating\",\n    \"ratingValue\": \"4.8\",\n    \"ratingCount\": \"350\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Voicit\",\n    \"url\": \"https:\/\/voicit.com\/\"\n  }\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"Inicio\", \"item\": \"https:\/\/voicit.com\/\" },\n    { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Producto\", \"item\": \"https:\/\/voicit.com\/graba-transcribe-y-resume-tus-reuniones-con-ia\/\" },\n    { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"RRHH\", \"item\": \"https:\/\/voicit.com\/recursos-humanos\/\" },\n    { \"@type\": \"ListItem\", \"position\": 4, \"name\": \"Grabar entrevistas telef\u00f3nicas\", \"item\": \"https:\/\/voicit.com\/grabar-entrevistas-telefonicas\/\" }\n  ]\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Product\",\n  \"name\": \"Grabadora de llamadas y entrevistas\",\n  \"image\": \"https:\/\/voicit.com\/wp-content\/uploads\/2025\/10\/Phone-Call-Recorder.jpg\",\n  \"description\": \"Grabadora de llamadas para entrevistas telef\u00f3nicas: capta la conversaci\u00f3n del auricular del tel\u00e9fono por vibraci\u00f3n, sin altavoz. Hasta 188 h de grabaci\u00f3n, formatos MP3 y WAV, se transfiere a Voicit por USB.\",\n  \"brand\": { \"@type\": \"Brand\", \"name\": \"Voicit\" },\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"49.99\",\n    \"priceCurrency\": \"EUR\",\n    \"availability\": \"https:\/\/schema.org\/InStock\",\n    \"url\": \"https:\/\/voicit.com\/pricing\/#comprar-dispositivos\"\n  }\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n  { \"@type\": \"Question\", \"name\": \"\u00bfSe puede grabar una entrevista de trabajo por tel\u00e9fono?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"S\u00ed. La buena pr\u00e1ctica (y lo que exige el RGPD) es informar a la persona de que la llamada se va a grabar y con qu\u00e9 fin. Voicit es una empresa europea y el tratamiento de los datos es confidencial. Informa al candidato al inicio de la llamada y tendr\u00e1s un registro objetivo del proceso.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfC\u00f3mo grabo una llamada telef\u00f3nica para documentar la entrevista?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Tienes cuatro formas: con el m\u00f3vil en altavoz y la app de escritorio; con la extensi\u00f3n de Chrome captando el audio interno del ordenador; seleccionando la pesta\u00f1a del navegador de la llamada; o con nuestra grabadora f\u00edsica, que capta el auricular por vibraci\u00f3n sin necesidad de altavoz.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfC\u00f3mo diferencia Voicit qui\u00e9n es el candidato y qui\u00e9n el entrevistador?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Mediante diarizaci\u00f3n: la IA separa las voces de la llamada y las atribuye a cada interlocutor, de modo que el informe refleja con fidelidad qu\u00e9 dijo el candidato y qu\u00e9 el entrevistador.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfNecesito poner el tel\u00e9fono en altavoz?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"No necesariamente. Con la app de escritorio s\u00ed se usa el altavoz, pero con la grabadora f\u00edsica captas el sonido del auricular por sus vibraciones, as\u00ed que puedes grabar la llamada en privado.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfFunciona si llamo desde el ordenador o desde el navegador?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"S\u00ed. Si llamas con una aplicaci\u00f3n de escritorio, la extensi\u00f3n capta el audio interno del equipo; si la llamada ocurre en el navegador, seleccionas esa pesta\u00f1a y Voicit graba esa fuente.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfQu\u00e9 incluye el informe del candidato?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"La transcripci\u00f3n de la llamada y un informe estructurado por secciones (trayectoria, competencias, motivaci\u00f3n, expectativas y conclusi\u00f3n), adaptado a tu plantilla.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfNecesito comprar la grabadora?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"No es obligatoria. Solo la necesitas si prefieres grabar sin altavoz y sin ordenador. Se vende aparte por 49,99 \u20ac, pago \u00fanico y sin suscripci\u00f3n.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfEs confidencial grabar y subir las entrevistas?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"S\u00ed. Voicit es una empresa europea y trata los datos conforme al RGPD; las grabaciones y los informes son confidenciales.\" } },\n  { \"@type\": \"Question\", \"name\": \"\u00bfCu\u00e1nto cuesta Voicit?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Desde 7 \u20ac\/mes, y puedes empezar gratis, sin tarjeta de cr\u00e9dito.\" } }\n ]\n}\n<\/script>\n\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function() {\n  'use strict';\n  \/\/ Textos del chat seg\u00fan idioma (TranslatePress cambia <html lang>). No depende de TranslatePress.\n  var VLI18N = (function(){\n    var d = {\n      es:{gen:'Generando plantilla\u2026',done:'Borrador de plantilla generado',fmt:'Formato',len:'Longitud',listo:'Listo',\n          tf:{r:'Redactado',b:'Bullet points',h:'Num\u00e9rico'},tl:{l:'Largo',m:'Medio',s:'Corto'},\n          instr:['Extrae los datos b\u00e1sicos del candidato: nombre, edad, ubicaci\u00f3n, formaci\u00f3n y disponibilidad.',\n                 'Resume la trayectoria del candidato destacando los 3 puestos m\u00e1s relevantes para el rol. Tono profesional.',\n                 'Eval\u00faa las competencias clave del rol en escala 1\u20135 con una breve justificaci\u00f3n de cada puntuaci\u00f3n.',\n                 'Recoge los motivos del candidato para considerar un cambio profesional y su inter\u00e9s en la oferta.',\n                 'Cierra con una recomendaci\u00f3n clara y los pr\u00f3ximos pasos sugeridos.']},\n      en:{gen:'Generating template\u2026',done:'Template draft generated',fmt:'Format',len:'Length',listo:'Done',\n          tf:{r:'Prose',b:'Bullet points',h:'Numeric'},tl:{l:'Long',m:'Medium',s:'Short'},\n          instr:[\"Extract the candidate's basic details: name, age, location, education and availability.\",\n                 \"Summarize the candidate's career, highlighting the 3 most relevant roles for the position. Professional tone.\",\n                 \"Assess the role's key competencies on a 1\u20135 scale with a brief justification for each score.\",\n                 \"Capture the candidate's reasons for considering a career change and their interest in the offer.\",\n                 \"Close with a clear recommendation and the suggested next steps.\"]},\n      fr:{gen:'G\u00e9n\u00e9ration du mod\u00e8le\u2026',done:'Brouillon de mod\u00e8le g\u00e9n\u00e9r\u00e9',fmt:'Format',len:'Longueur',listo:'Termin\u00e9',\n          tf:{r:'R\u00e9dig\u00e9',b:'Puces',h:'Num\u00e9rique'},tl:{l:'Long',m:'Moyen',s:'Court'},\n          instr:['Extrais les donn\u00e9es de base du candidat : nom, \u00e2ge, localisation, formation et disponibilit\u00e9.',\n                 'R\u00e9sume le parcours du candidat en mettant en avant les 3 postes les plus pertinents pour le r\u00f4le. Ton professionnel.',\n                 '\u00c9value les comp\u00e9tences cl\u00e9s du poste sur une \u00e9chelle de 1 \u00e0 5 avec une br\u00e8ve justification de chaque note.',\n                 'Recueille les raisons du candidat d\u2019envisager un changement professionnel et son int\u00e9r\u00eat pour l\u2019offre.',\n                 'Conclus par une recommandation claire et les prochaines \u00e9tapes sugg\u00e9r\u00e9es.']},\n      de:{gen:'Vorlage wird erstellt\u2026',done:'Vorlagenentwurf erstellt',fmt:'Format',len:'L\u00e4nge',listo:'Fertig',\n          tf:{r:'Flie\u00dftext',b:'Aufz\u00e4hlung',h:'Numerisch'},tl:{l:'Lang',m:'Mittel',s:'Kurz'},\n          instr:['Extrahiere die Basisdaten des Kandidaten: Name, Alter, Standort, Ausbildung und Verf\u00fcgbarkeit.',\n                 'Fasse den Werdegang des Kandidaten zusammen und hebe die 3 relevantesten Positionen f\u00fcr die Rolle hervor. Professioneller Ton.',\n                 'Bewerte die Schl\u00fcsselkompetenzen der Rolle auf einer Skala von 1\u20135 mit einer kurzen Begr\u00fcndung je Bewertung.',\n                 'Erfasse die Gr\u00fcnde des Kandidaten f\u00fcr einen beruflichen Wechsel und sein Interesse am Angebot.',\n                 'Schlie\u00dfe mit einer klaren Empfehlung und den vorgeschlagenen n\u00e4chsten Schritten ab.']},\n      it:{gen:'Generazione del modello\u2026',done:'Bozza del modello generata',fmt:'Formato',len:'Lunghezza',listo:'Fatto',\n          tf:{r:'Discorsivo',b:'Elenco puntato',h:'Numerico'},tl:{l:'Lungo',m:'Medio',s:'Corto'},\n          instr:['Estrai i dati di base del candidato: nome, et\u00e0, localit\u00e0, formazione e disponibilit\u00e0.',\n                 'Riassumi il percorso del candidato evidenziando le 3 posizioni pi\u00f9 rilevanti per il ruolo. Tono professionale.',\n                 'Valuta le competenze chiave del ruolo su una scala 1\u20135 con una breve motivazione per ogni punteggio.',\n                 'Raccogli le motivazioni del candidato per considerare un cambio professionale e il suo interesse per l\u2019offerta.',\n                 'Chiudi con una raccomandazione chiara e i prossimi passi suggeriti.']},\n      pt:{gen:'A gerar modelo\u2026',done:'Rascunho do modelo gerado',fmt:'Formato',len:'Comprimento',listo:'Conclu\u00eddo',\n          tf:{r:'Redigido',b:'T\u00f3picos',h:'Num\u00e9rico'},tl:{l:'Longo',m:'M\u00e9dio',s:'Curto'},\n          instr:['Extrai os dados b\u00e1sicos do candidato: nome, idade, localiza\u00e7\u00e3o, forma\u00e7\u00e3o e disponibilidade.',\n                 'Resume o percurso do candidato destacando os 3 cargos mais relevantes para a fun\u00e7\u00e3o. Tom profissional.',\n                 'Avalia as compet\u00eancias-chave da fun\u00e7\u00e3o numa escala de 1 a 5 com uma breve justifica\u00e7\u00e3o de cada pontua\u00e7\u00e3o.',\n                 'Re\u00fane os motivos do candidato para considerar uma mudan\u00e7a profissional e o seu interesse na oferta.',\n                 'Termina com uma recomenda\u00e7\u00e3o clara e os pr\u00f3ximos passos sugeridos.']},\n      ca:{gen:'Generant plantilla\u2026',done:'Esborrany de plantilla generat',fmt:'Format',len:'Longitud',listo:'Fet',\n          tf:{r:'Redactat',b:'Pics',h:'Num\u00e8ric'},tl:{l:'Llarg',m:'Mitj\u00e0',s:'Curt'},\n          instr:['Extreu les dades b\u00e0siques del candidat: nom, edat, ubicaci\u00f3, formaci\u00f3 i disponibilitat.',\n                 'Resumeix la traject\u00f2ria del candidat destacant els 3 llocs m\u00e9s rellevants per al rol. To professional.',\n                 'Avalua les compet\u00e8ncies clau del rol en una escala 1\u20135 amb una breu justificaci\u00f3 de cada puntuaci\u00f3.',\n                 'Recull els motius del candidat per considerar un canvi professional i el seu inter\u00e8s en l\u2019oferta.',\n                 'Tanca amb una recomanaci\u00f3 clara i els propers passos suggerits.']}\n    };\n    var l = (document.documentElement.lang||'es').slice(0,2).toLowerCase();\n    return d[l] || d.es;\n  })();\n\n  \/\/ Intersection Observer para reveal on scroll\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        observer.unobserve(entry.target);\n      }\n    });\n  }, {\n    threshold: 0.1,\n    rootMargin: '0px 0px -50px 0px'\n  });\n\n  \/\/ Observar todos los elementos .vl-reveal EXCEPTO los mockups\n  document.querySelectorAll('.vl-reveal:not(.vl-mk-filepicker):not(.vl-mk-chat):not(.vl-mk-editor)').forEach(el => {\n    observer.observe(el);\n  });\n\n  \/\/ Observador espec\u00edfico para mockups con trigger m\u00e1s estricto\n  \/\/ (solo dispara cuando el mockup est\u00e1 bien dentro del viewport)\n  const mockupObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        mockupObserver.unobserve(entry.target);\n\n        \/\/ Editor del Paso 3: abrir autom\u00e1ticamente una secci\u00f3n SOLO en escritorio.\n        \/\/ En tablet\/m\u00f3vil vertical (\u22641024px) lo dejamos todo contra\u00eddo para que la\n        \/\/ ilustraci\u00f3n quepa entera; el usuario abre la secci\u00f3n que quiera.\n        if (entry.target.classList.contains('vl-mk-editor') && !window.matchMedia('(max-width: 1024px)').matches) {\n          setTimeout(() => {\n            const sections = entry.target.querySelectorAll('[data-vl-section]');\n            if (sections[1]) vlEditorOpenSection(sections[1]);\n          }, 1100);\n        }\n      }\n    });\n  }, {\n    threshold: 0.45,\n    rootMargin: '0px 0px -15% 0px'\n  });\n  document.querySelectorAll('.vl-mk-filepicker, .vl-mk-chat, .vl-mk-editor').forEach(el => {\n    mockupObserver.observe(el);\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MOCKUP PASO 3 \u2014 L\u00f3gica interactiva del editor\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  \/\/ HTML reutilizable de los controles (instrucciones + Formato + Longitud)\n  function vlEditorControlsHtml(instructions) {\n    return `\n      <div class=\"vl-mk-editor-instructions\">${instructions}<\/div>\n      <div class=\"vl-mk-editor-controls\">\n        <div class=\"vl-mk-editor-ctrl-group\">\n          <label class=\"vl-mk-editor-ctrl-label\">${VLI18N.fmt}<\/label>\n          <div class=\"vl-mk-editor-btn-group\" data-vl-ctrl=\"formato\">\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn is-active\" data-vl-val=\"redactado\" title=\"${VLI18N.tf.r}\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"2.5\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"4\" y=\"11\" width=\"14\" height=\"2.5\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"4\" y=\"16\" width=\"10\" height=\"2.5\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"bullets\" title=\"${VLI18N.tf.b}\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><circle cx=\"5.5\" cy=\"7.2\" r=\"1.4\" fill=\"currentColor\"\/><rect x=\"9.5\" y=\"6\" width=\"11\" height=\"2.4\" rx=\"1\" fill=\"currentColor\"\/><circle cx=\"5.5\" cy=\"12.2\" r=\"1.4\" fill=\"currentColor\"\/><rect x=\"9.5\" y=\"11\" width=\"11\" height=\"2.4\" rx=\"1\" fill=\"currentColor\"\/><circle cx=\"5.5\" cy=\"17.2\" r=\"1.4\" fill=\"currentColor\"\/><rect x=\"9.5\" y=\"16\" width=\"11\" height=\"2.4\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"hashtag\" title=\"${VLI18N.tf.h}\">\n              <span class=\"vl-mk-editor-hash\">#<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n        <div class=\"vl-mk-editor-ctrl-group\">\n          <label class=\"vl-mk-editor-ctrl-label\">${VLI18N.len}<\/label>\n          <div class=\"vl-mk-editor-btn-group\" data-vl-ctrl=\"longitud\">\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"larga\" title=\"${VLI18N.tl.l}\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"9\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"13\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"17\" width=\"11\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn\" data-vl-val=\"media\" title=\"${VLI18N.tl.m}\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"12\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"16\" width=\"11\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n            <button type=\"button\" class=\"vl-mk-editor-icon-btn is-active\" data-vl-val=\"corta\" title=\"${VLI18N.tl.s}\">\n              <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><rect x=\"4\" y=\"15\" width=\"9\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n      <button type=\"button\" class=\"vl-mk-editor-done\" data-vl-done>${VLI18N.listo}<\/button>\n    `;\n  }\n\n  \/\/ Abrir una secci\u00f3n \u2014 primero cierra la anterior, luego abre la nueva (secuencial)\n  function vlEditorOpenSection(section) {\n    const editor = section.closest('.vl-mk-editor');\n    if (!editor) return;\n\n    \/\/ Inyectamos contenido si todav\u00eda no lo tiene\n    const body = section.querySelector('.vl-mk-editor-section-body');\n    if (body && !body.dataset.vlPopulated) {\n      const k = section.dataset.instrKey;\n      const instructions = (VLI18N.instr && k != null && VLI18N.instr[k] != null) ? VLI18N.instr[k] : (section.dataset.instructions || '');\n      body.innerHTML = vlEditorControlsHtml(instructions);\n      body.dataset.vlPopulated = '1';\n    }\n\n    const openOnes = Array.from(editor.querySelectorAll('.vl-mk-editor-section--open'))\n      .filter(s => s !== section);\n\n    if (openOnes.length > 0) {\n      \/\/ 1) Cerrar la(s) que est\u00e9n abiertas\n      openOnes.forEach(s => s.classList.remove('vl-mk-editor-section--open'));\n      \/\/ 2) Esperar a que termine la transici\u00f3n de colapso, luego abrir la nueva\n      clearTimeout(editor._vlOpenTimer);\n      editor._vlOpenTimer = setTimeout(() => {\n        section.classList.add('vl-mk-editor-section--open');\n        editor.classList.add('vl-mk-editor--solo');   \/\/ m\u00f3vil: solo se muestra la secci\u00f3n abierta\n      }, 420);\n    } else {\n      \/\/ Nada estaba abierto \u2192 abrir directamente\n      section.classList.add('vl-mk-editor-section--open');\n      editor.classList.add('vl-mk-editor--solo');     \/\/ m\u00f3vil: solo se muestra la secci\u00f3n abierta\n    }\n  }\n\n  \/\/ Cerrar una secci\u00f3n\n  function vlEditorCloseSection(section) {\n    section.classList.remove('vl-mk-editor-section--open');\n    const editor = section.closest('.vl-mk-editor');\n    if (editor) editor.classList.remove('vl-mk-editor--solo');   \/\/ vuelven a verse todas las secciones\n  }\n\n  \/\/ Auto-scroll a un paso concreto dentro del scroll congelado de la secci\u00f3n \"3 pasos\"\n  function vlGoToStep(idx, delay) {\n    var track = document.querySelector('.vl-ssteps-track');\n    if (!track) return;\n    var nSteps = document.querySelectorAll('.vl-sstep').length || 3;\n    setTimeout(function () {\n      var absTop = track.getBoundingClientRect().top + window.scrollY;\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) return;\n      var target = absTop + scrollable * ((idx + 0.5) \/ nSteps);\n      window.scrollTo({ top: Math.round(target), behavior: 'smooth' });\n    }, delay || 0);\n  }\n\n  \/\/ Toggle del head: si la secci\u00f3n clicada est\u00e1 abierta la cerramos, si no la abrimos\n  document.addEventListener('click', (e) => {\n    \/\/ 1) Click en la cabecera de una secci\u00f3n \u2192 toggle accordion\n    const head = e.target.closest('[data-vl-toggle]');\n    if (head) {\n      const section = head.closest('[data-vl-section]');\n      if (section.classList.contains('vl-mk-editor-section--open')) {\n        vlEditorCloseSection(section);\n      } else {\n        vlEditorOpenSection(section);\n      }\n      return;\n    }\n\n    \/\/ 1b) Click en \"Listo\" (m\u00f3vil) \u2192 contraer la secci\u00f3n y mostrar de nuevo todas\n    const doneBtn = e.target.closest('[data-vl-done]');\n    if (doneBtn) {\n      const sec = doneBtn.closest('[data-vl-section]');\n      if (sec) vlEditorCloseSection(sec);\n      return;\n    }\n\n    \/\/ 2) Click en un bot\u00f3n de Formato\/Longitud \u2192 cambiar selecci\u00f3n\n    const iconBtn = e.target.closest('.vl-mk-editor-icon-btn');\n    if (iconBtn) {\n      const group = iconBtn.parentElement;\n      group.querySelectorAll('.vl-mk-editor-icon-btn').forEach(b => b.classList.remove('is-active'));\n      iconBtn.classList.add('is-active');\n      return;\n    }\n\n    \/\/ 3) Click en \"Guardar plantilla\" \u2192 pulso + toast\n    const saveBtn = e.target.closest('[data-vl-save]');\n    if (saveBtn) {\n      const editor = saveBtn.closest('.vl-mk-editor');\n      const toast = editor.querySelector('.vl-mk-editor-toast');\n      if (toast) {\n        toast.classList.remove('is-hiding');\n        toast.classList.remove('is-showing');\n        void toast.offsetWidth;\n        toast.classList.add('is-showing');\n\n        clearTimeout(toast._hideTimer);\n        toast._hideTimer = setTimeout(() => {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2200);\n      }\n      return;\n    }\n  });\n\n  \/\/ Filtrar click en el handle del drag para que no dispare el toggle de la secci\u00f3n\n  document.addEventListener('click', (e) => {\n    if (e.target.closest('.vl-mk-editor-drag')) {\n      e.stopPropagation();\n    }\n  }, true);\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MOCKUP PASO 1 \u2014 File picker interactivo\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  document.addEventListener('click', (e) => {\n    \/\/ Click en un archivo PDF \u2192 seleccionarlo\n    const file = e.target.closest('.vl-mk-fp-file');\n    if (file) {\n      const picker = file.closest('.vl-mk-filepicker');\n      if (picker) {\n        picker.querySelectorAll('.vl-mk-fp-file').forEach(f => f.classList.remove('is-selected'));\n        file.classList.add('is-selected');\n        const btn = picker.querySelector('.vl-mk-fp-btn');\n        if (btn) btn.classList.add('is-enabled');\n      }\n      return;\n    }\n\n    \/\/ Click en \"Subir informe\" \u2192 toast desde arriba\n    const upBtn = e.target.closest('[data-vl-upload]');\n    if (upBtn && upBtn.classList.contains('is-enabled')) {\n      const picker = upBtn.closest('.vl-mk-filepicker');\n      const toast = picker?.querySelector('.vl-mk-fp-toast');\n      if (toast) {\n        toast.classList.remove('is-hiding');\n        toast.classList.remove('is-showing');\n        void toast.offsetWidth;\n        toast.classList.add('is-showing');\n        clearTimeout(toast._hideTimer);\n        toast._hideTimer = setTimeout(() => {\n          toast.classList.remove('is-showing');\n          toast.classList.add('is-hiding');\n        }, 2200);\n      }\n      \/\/ Auto-avance al Paso 2 tras subir el informe\n      vlGoToStep(1, 700);\n      return;\n    }\n\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MOCKUP PASO 2 \u2014 Chat interactivo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    \/\/ Click en \"Ajustar\" \u2192 modo edici\u00f3n (aparecen las X en cada secci\u00f3n)\n    const adjustBtn = e.target.closest('[data-vl-chat-adjust]');\n    if (adjustBtn) {\n      const chat = adjustBtn.closest('.vl-mk-chat');\n      if (chat) chat.classList.add('is-editing');\n      return;\n    }\n\n    \/\/ Click en una \u2715 \u2192 eliminar esa secci\u00f3n con animaci\u00f3n\n    const delBtn = e.target.closest('[data-vl-delete-section]');\n    if (delBtn) {\n      const li = delBtn.closest('li');\n      if (li) {\n        \/\/ Fijamos su altura actual para que la animaci\u00f3n de max-height funcione\n        li.style.maxHeight = li.offsetHeight + 'px';\n        void li.offsetWidth;\n        li.classList.add('is-removing');\n        setTimeout(() => li.remove(), 340);\n      }\n      return;\n    }\n\n    \/\/ Click en \"S\u00ed, generar\" \u2192 a\u00f1adir burbuja \"Generando...\" con shimmer permanente\n    const confirmBtn = e.target.closest('[data-vl-chat-confirm]');\n    if (confirmBtn) {\n      const chat = confirmBtn.closest('.vl-mk-chat');\n      if (!chat || chat.dataset.vlGenerating === '1') return;\n      chat.dataset.vlGenerating = '1';\n      chat.classList.remove('is-editing');\n\n      \/\/ Auto-avance al Paso 3 al confirmar la generaci\u00f3n\n      vlGoToStep(2, 1000);\n\n      \/\/ Deshabilitamos los botones para que no se pueda volver a pulsar\n      chat.querySelectorAll('.vl-mk-chat-btn').forEach(b => {\n        b.disabled = true;\n        b.style.opacity = '0.5';\n        b.style.cursor = 'default';\n        b.style.pointerEvents = 'none';\n      });\n\n      \/\/ Creamos la nueva burbuja con shimmer \"Generando\u2026\"\n      const row = document.createElement('div');\n      row.className = 'vl-mk-chat-row vl-mk-chat-row--ai';\n      row.style.opacity = '0';\n      row.innerHTML = `\n        <div class=\"vl-mk-chat-avatar\">\n          <span class=\"vl-orb vl-orb--avatar\" aria-hidden=\"true\"><span class=\"vl-orb-glow\"><canvas data-orb-glow width=\"72\" height=\"72\"><\/canvas><\/span><span class=\"vl-orb-main\"><canvas data-orb-main width=\"72\" height=\"72\"><\/canvas><\/span><\/span>\n        <\/div>\n        <div class=\"vl-mk-chat-bubble vl-mk-chat-bubble--ai\">\n          <span class=\"vl-mk-shimmer\">${VLI18N.gen}<\/span>\n        <\/div>\n      `;\n      chat.appendChild(row);\n      \/\/ El orbe se crea din\u00e1micamente \u2192 hay que inicializarlo (igual que los avatares est\u00e1ticos)\n      try { if (window.vlInitOrb) window.vlInitOrb(row.querySelector('.vl-orb')); } catch (err) {}\n      \/\/ Forzar reflow y animar entrada\n      void row.offsetWidth;\n      row.style.transition = 'opacity 0.4s ease, transform 0.4s ease';\n      row.style.opacity = '1';\n\n      \/\/ Tras un peque\u00f1o delay, sustituir \"Generando...\" por el check de finalizado\n      setTimeout(() => {\n        const bubble = row.querySelector('.vl-mk-chat-bubble');\n        if (!bubble) return;\n        bubble.style.transition = 'opacity 0.3s ease';\n        bubble.style.opacity = '0';\n        setTimeout(() => {\n          bubble.innerHTML = '<span class=\"vl-mk-chat-done\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12l5 5L20 7\" stroke=\"#161616\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>' + VLI18N.done + '<\/span>';\n          bubble.style.opacity = '1';\n        }, 320);\n      }, 2400);\n      return;\n    }\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ DRAG & DROP para reordenar secciones del editor\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  let vlDrag = null;\n\n  document.addEventListener('pointerdown', (e) => {\n    const handle = e.target.closest('.vl-mk-editor-drag');\n    if (!handle) return;\n    const editor = handle.closest('.vl-mk-editor');\n    if (!editor) return;\n\n    e.preventDefault();\n    handle.setPointerCapture?.(e.pointerId);\n\n    const section = handle.closest('[data-vl-section]');\n    vlDrag = {\n      section,\n      editor,\n      container: section.parentElement,\n      handle,\n      pointerLastY: e.clientY,\n      currentTranslateY: 0,\n      pointerId: e.pointerId,\n    };\n\n    section.classList.add('vl-mk-editor-section--dragging');\n    editor.classList.add('vl-mk-editor--is-dragging');\n    document.body.style.cursor = 'grabbing';\n    document.body.style.userSelect = 'none';\n  });\n\n  document.addEventListener('pointermove', (e) => {\n    if (!vlDrag || e.pointerId !== vlDrag.pointerId) return;\n\n    \/\/ 1) Actualizamos el translate bas\u00e1ndonos en cu\u00e1nto se ha movido el puntero\n    const deltaY = e.clientY - vlDrag.pointerLastY;\n    vlDrag.currentTranslateY += deltaY;\n    vlDrag.pointerLastY = e.clientY;\n    vlDrag.section.style.transform = `translateY(${vlDrag.currentTranslateY}px)`;\n\n    \/\/ 2) Buscamos d\u00f3nde deber\u00eda insertarse seg\u00fan la posici\u00f3n del cursor\n    const cursorY = e.clientY;\n    const siblings = Array.from(vlDrag.container.querySelectorAll('[data-vl-section]'))\n      .filter(s => s !== vlDrag.section);\n\n    let insertBefore = null;\n    for (const sib of siblings) {\n      const rect = sib.getBoundingClientRect();\n      const midY = rect.top + rect.height \/ 2;\n      if (cursorY < midY) {\n        insertBefore = sib;\n        break;\n      }\n    }\n\n    const shouldReorder = insertBefore !== null\n      ? vlDrag.section.nextElementSibling !== insertBefore\n      : vlDrag.section !== vlDrag.container.lastElementChild;\n\n    if (shouldReorder) {\n      \/\/ Antes de reordenar guardamos d\u00f3nde est\u00e1 visualmente la secci\u00f3n\n      const rectBefore = vlDrag.section.getBoundingClientRect();\n\n      \/\/ Quitamos el transform para medir su posici\u00f3n natural\n      vlDrag.section.style.transform = '';\n\n      if (insertBefore) {\n        vlDrag.container.insertBefore(vlDrag.section, insertBefore);\n      } else {\n        vlDrag.container.appendChild(vlDrag.section);\n      }\n\n      \/\/ Medimos su nueva posici\u00f3n natural tras el reorder\n      const rectAfter = vlDrag.section.getBoundingClientRect();\n\n      \/\/ Aplicamos un offset para que visualmente quede donde estaba antes\n      vlDrag.currentTranslateY = rectBefore.top - rectAfter.top;\n      vlDrag.section.style.transform = `translateY(${vlDrag.currentTranslateY}px)`;\n    }\n  });\n\n\n\n  const vlDragEnd = (e) => {\n    if (!vlDrag) return;\n    if (e && e.pointerId !== vlDrag.pointerId) return;\n\n    const section = vlDrag.section;\n    const editor = vlDrag.editor;\n\n    section.classList.remove('vl-mk-editor-section--dragging');\n    editor.classList.remove('vl-mk-editor--is-dragging');\n\n    \/\/ Snap suave a su posici\u00f3n natural\n    section.style.transition = 'transform 0.22s cubic-bezier(0.34, 1.5, 0.64, 1)';\n    section.style.transform = '';\n    setTimeout(() => {\n      section.style.transition = '';\n    }, 240);\n\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    vlDrag = null;\n  };\n  document.addEventListener('pointerup', vlDragEnd);\n  document.addEventListener('pointercancel', vlDragEnd);\n\n  \/\/ Smooth scroll para anclas internas\n  document.querySelectorAll('.vl-landing a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function(e) {\n      e.preventDefault();\n      const target = document.querySelector(this.getAttribute('href'));\n      if (target) {\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  });\n})();\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCROLL CONGELADO DE LOS 3 PASOS \u2014 control por scroll\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function(){\n  'use strict';\n  \/\/ \u2500\u2500 Hero: bot\u00f3n \"Generar\" \u2192 transici\u00f3n a amarillo \"\u2713 Generado\" \u2500\u2500\n  var gen = document.querySelector('[data-vl-gen]');\n  if (gen) {\n    gen.addEventListener('click', function(){\n      if (gen.classList.contains('is-done') || gen.classList.contains('is-generating')) return;\n      gen.classList.add('is-generating');\n      gen.textContent = 'Generando\u2026';\n      setTimeout(function(){\n        gen.classList.remove('is-generating');\n        gen.classList.add('is-done');\n        gen.innerHTML = '<span class=\"vl-gen-tick\">\u2713<\/span> Generado';\n      }, 750);\n    });\n  }\n\n  \/\/ \u2500\u2500 Hero: mini-men\u00fas de Formato \/ Longitud por secci\u00f3n (selecci\u00f3n persistente) \u2500\u2500\n  var CFG = {\n    formato:  { order: ['redactado','bullets','hashtag'], label: { redactado: \"Redactado\", bullets: \"Bullet points\", hashtag: \"Num\u00e9rico\" }, svg: { redactado: \"<svg viewBox=\\\"0 0 24 24\\\" width=\\\"15\\\" height=\\\"15\\\" fill=\\\"none\\\"><rect x=\\\"4\\\" y=\\\"6\\\" width=\\\"16\\\" height=\\\"2.5\\\" rx=\\\"1\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"11\\\" width=\\\"14\\\" height=\\\"2.5\\\" rx=\\\"1\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"16\\\" width=\\\"10\\\" height=\\\"2.5\\\" rx=\\\"1\\\" fill=\\\"currentColor\\\"\/><\/svg>\", bullets: \"<svg viewBox=\\\"0 0 24 24\\\" width=\\\"15\\\" height=\\\"15\\\" fill=\\\"none\\\"><circle cx=\\\"5.5\\\" cy=\\\"7.2\\\" r=\\\"1.4\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"9.5\\\" y=\\\"6\\\" width=\\\"11\\\" height=\\\"2.4\\\" rx=\\\"1\\\" fill=\\\"currentColor\\\"\/><circle cx=\\\"5.5\\\" cy=\\\"12.2\\\" r=\\\"1.4\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"9.5\\\" y=\\\"11\\\" width=\\\"11\\\" height=\\\"2.4\\\" rx=\\\"1\\\" fill=\\\"currentColor\\\"\/><circle cx=\\\"5.5\\\" cy=\\\"17.2\\\" r=\\\"1.4\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"9.5\\\" y=\\\"16\\\" width=\\\"11\\\" height=\\\"2.4\\\" rx=\\\"1\\\" fill=\\\"currentColor\\\"\/><\/svg>\", hashtag: \"<span style=\\\"font-weight:800;font-size:14px;line-height:1;\\\">#<\/span>\" } },\n    longitud: { order: ['corta','media','larga'],          label: { corta: \"Corto\", media: \"Medio\", larga: \"Largo\" }, svg: { corta: \"<svg viewBox=\\\"0 0 24 24\\\" width=\\\"15\\\" height=\\\"15\\\" fill=\\\"none\\\"><rect x=\\\"4\\\" y=\\\"11\\\" width=\\\"16\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"15\\\" width=\\\"9\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><\/svg>\", media: \"<svg viewBox=\\\"0 0 24 24\\\" width=\\\"15\\\" height=\\\"15\\\" fill=\\\"none\\\"><rect x=\\\"4\\\" y=\\\"8\\\" width=\\\"16\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"12\\\" width=\\\"16\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"16\\\" width=\\\"11\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><\/svg>\", larga: \"<svg viewBox=\\\"0 0 24 24\\\" width=\\\"15\\\" height=\\\"15\\\" fill=\\\"none\\\"><rect x=\\\"4\\\" y=\\\"5\\\" width=\\\"16\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"9\\\" width=\\\"16\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"13\\\" width=\\\"16\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><rect x=\\\"4\\\" y=\\\"17\\\" width=\\\"11\\\" height=\\\"1.8\\\" rx=\\\"0.9\\\" fill=\\\"currentColor\\\"\/><\/svg>\" } }\n  };\n\n  function closeMenus(){\n    [].slice.call(document.querySelectorAll('.vl-mk-cfg-ico.is-open')).forEach(function(b){\n      b.classList.remove('is-open');\n      var li = b.closest('li'); if (li){ li.style.zIndex=''; li.style.position=''; }\n      var m = b.querySelector('.vl-mk-cfg-menu'); if (m) m.parentNode.removeChild(m);\n    });\n  }\n\n  function openMenu(btn){\n    var type = btn.getAttribute('data-vl-cfgbtn');\n    var conf = CFG[type]; if (!conf) return;\n    var cur = btn.getAttribute('data-vl-val');\n    var menu = document.createElement('div');\n    menu.className = 'vl-mk-cfg-menu';\n    conf.order.forEach(function(val){\n      var opt = document.createElement('button');\n      opt.type = 'button';\n      opt.className = 'vl-mk-cfg-opt' + (val===cur ? ' is-active' : '');\n      opt.setAttribute('data-vl-pick', val);\n      opt.innerHTML = '<span class=\"vl-mk-cfg-opt-ico\">' + conf.svg[val] + '<\/span>' + conf.label[val];\n      menu.appendChild(opt);\n    });\n    var r = btn.getBoundingClientRect();\n    if (r.bottom + 170 > (window.innerHeight || 800)) menu.classList.add('vl-up');\n    btn.appendChild(menu);\n    btn.classList.add('is-open');\n    var li = btn.closest('li'); if (li){ li.style.position='relative'; li.style.zIndex='50'; }\n  }\n\n  document.addEventListener('click', function(e){\n    var opt = e.target.closest('.vl-mk-cfg-opt');\n    if (opt){\n      var b = opt.closest('.vl-mk-cfg-ico');\n      var type = b.getAttribute('data-vl-cfgbtn');\n      var val = opt.getAttribute('data-vl-pick');\n      var conf = CFG[type];\n      b.setAttribute('data-vl-val', val);\n      b.setAttribute('title', (type==='formato' ? 'Formato: ' : 'Longitud: ') + conf.label[val].toLowerCase());\n      var glyph = b.querySelector('.vl-mk-cfg-glyph');\n      if (glyph) glyph.innerHTML = conf.svg[val];\n      closeMenus();\n      e.stopPropagation();\n      return;\n    }\n    var btn = e.target.closest('.vl-mk-cfg-ico');\n    if (btn){\n      var wasOpen = btn.classList.contains('is-open');\n      closeMenus();\n      if (!wasOpen) openMenu(btn);\n      e.stopPropagation();\n      return;\n    }\n    closeMenus();\n  });\n})();\n<\/script>\n\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n  var track = document.querySelector('.vl-ssteps-track');\n  if (!track) return;\n  var steps = [].slice.call(document.querySelectorAll('.vl-sstep'));\n  var dots  = [].slice.call(document.querySelectorAll('[data-sstep-dot]'));\n  if (!steps.length) return;\n\n  var seen = {};       \/\/ mockups cuya animaci\u00f3n ya se dispar\u00f3\n  var current = -1;\n  var dtitle = document.querySelector('.vl-ssteps-dtitle');\n  var progress = document.querySelector('.vl-ssteps-progress');\n\n  function isMobile(){ return window.matchMedia('(max-width: 900px)').matches; }\n\n  \/\/ El t\u00edtulo (y las barritas de progreso) arrancan transparentes y se revelan con un fundido + ligero ascenso\n  \/\/ NADA M\u00c1S entrar el bloque por la parte baja: alcanzan el 100% mucho antes de que la secci\u00f3n quede fija.\n  function revealTitle(rectTop){\n    if (!dtitle) return;\n    if (window.matchMedia('(max-width: 1024px)').matches) {\n      dtitle.style.opacity = ''; dtitle.style.transform = '';\n      if (progress) { progress.style.opacity = ''; progress.style.transform = ''; }\n      return;\n    }\n    var vh = window.innerHeight || 800;\n    var start = vh * 0.88;                 \/\/ empieza a revelarse al asomar por abajo\n    var end   = vh * 0.60;                 \/\/ 100% visible mucho antes de fijarse arriba\n    var o = (start - rectTop) \/ (start - end);\n    o = Math.max(0, Math.min(1, o));\n    var ty = ((1 - o) * 10).toFixed(1);\n    dtitle.style.opacity = o.toFixed(3);\n    dtitle.style.transform = 'translateY(' + ty + 'px)';\n    if (progress) { progress.style.opacity = o.toFixed(3); progress.style.transform = 'translateY(' + ty + 'px)'; }\n  }\n\n  function fireMockup(i){\n    var m = steps[i] && steps[i].querySelector('.vl-mk-filepicker, .vl-mk-chat, .vl-mk-editor');\n    if (m && !seen[i]) { seen[i] = true; m.classList.add('is-visible'); }\n  }\n\n  function isStacked(){ return window.matchMedia('(max-width: 1024px)').matches || window.matchMedia('(hover: none) and (pointer: coarse)').matches; }\n  \/\/ M\u00f3vil\/tablet: todos los pasos visibles, apilados (sin scroll fijado)\n  function applyStacked(){\n    for (var s = 0; s < steps.length; s++){ steps[s].classList.add('is-active'); fireMockup(s); }\n  }\n\n  function activate(i){\n    if (i === current) return;\n    current = i;\n    for (var s = 0; s < steps.length; s++) steps[s].classList.toggle('is-active', s === i);\n    for (var d = 0; d < dots.length; d++) dots[d].classList.toggle('is-active', d === i);\n    fireMockup(i);\n  }\n\n  function onScroll(){\n    if (isStacked()) { applyStacked(); return; }   \/\/ m\u00f3vil: sin scroll-jack, todo apilado y visible\n    var rect = track.getBoundingClientRect();\n    var scrollable = track.offsetHeight - window.innerHeight;\n    if (scrollable <= 0) return;\n    var prog = (-rect.top) \/ scrollable;          \/\/ 0 al entrar, 1 al salir\n    prog = Math.max(0, Math.min(0.9999, prog));\n    var pos = prog * steps.length;                \/\/ 0..nSteps\n    var curr = Math.floor(pos);\n    var local = pos - curr;                       \/\/ 0..1 dentro del paso actual\n    activate(curr);\n    \/\/ Feedback continuo: la barra del paso actual se rellena seg\u00fan el scroll; las anteriores quedan llenas\n    for (var k = 0; k < dots.length; k++) {\n      var fill = (k < curr) ? 1 : (k === curr ? local : 0);\n      dots[k].style.setProperty('--fill', fill.toFixed(3));\n    }\n    revealTitle(rect.top);\n  }\n\n  if (isStacked()) applyStacked(); else activate(0);\n\n  \/\/ Barras de progreso clicables \u2192 llevan a su paso\n  dots.forEach(function (dot, i) {\n    dot.addEventListener('click', function () {\n      var absTop = track.getBoundingClientRect().top + window.scrollY;\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) return;\n      var target = absTop + scrollable * ((i + 0.5) \/ steps.length);\n      window.scrollTo({ top: Math.round(target), behavior: 'smooth' });\n    });\n  });\n\n  var ticking = false;\n  window.addEventListener('scroll', function () {\n    if (!ticking) { requestAnimationFrame(function () { onScroll(); ticking = false; }); ticking = true; }\n  }, { passive: true });\n  window.addEventListener('resize', function () { current = -1; onScroll(); });\n  onScroll();\n})();\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     COMPARATIVA \"Antes \/ Ahora\" \u2014 revelado natural al entrar en pantalla (sin scroll fijado)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-cmp-section');\n  if (!section) return;\n  var track = section.querySelector('.vl-cmp-track');\n  var arrowPath = section.querySelector('.vl-compare-arrow svg path');\n  var afterCard = section.querySelector('.vl-compare-card--after');\n  var items = [].slice.call(section.querySelectorAll('.vl-compare-card--after .vl-compare-list li'));\n  var mq = window.matchMedia('(max-width: 1024px)');\n  function rng(p, a, b){ return Math.max(0, Math.min(1, (p - a) \/ (b - a))); }\n\n  function clearInline(){\n    if (arrowPath) arrowPath.style.strokeDashoffset = '';\n    if (afterCard) { afterCard.style.opacity = ''; afterCard.style.transform = ''; }\n    items.forEach(function (it){ it.style.opacity = ''; it.style.transform = ''; });\n  }\n  function revealInline(){\n    if (arrowPath) arrowPath.style.strokeDashoffset = '0';\n    if (afterCard) { afterCard.style.opacity = '1'; afterCard.style.transform = 'none'; }\n    items.forEach(function (it){ it.style.opacity = '1'; it.style.transform = 'none'; });\n  }\n\n  \/\/ ESCRITORIO: animaci\u00f3n dirigida por el scroll fijado (estilos inline).\n  function update(){\n    if (mq.matches || !track) return;   \/\/ m\u00f3vil \u2192 lo gestiona el revelado por IO\n    try {\n      var rect = track.getBoundingClientRect();\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) { revealInline(); return; }\n      var p = Math.max(0, Math.min(1, (-rect.top) \/ scrollable));\n      if (arrowPath) arrowPath.style.strokeDashoffset = (1 - rng(p, 0.10, 0.40)).toFixed(3);\n      if (afterCard) {\n        var ca = rng(p, 0.32, 0.54);\n        afterCard.style.opacity = ca.toFixed(3);\n        afterCard.style.transform = 'translateX(' + ((1 - ca) * -42).toFixed(1) + 'px)';\n      }\n      var starts = [0.56, 0.70, 0.84];\n      for (var i = 0; i < items.length; i++){\n        var s = starts[i] != null ? starts[i] : (0.56 + i * 0.14);\n        var f = rng(p, s, s + 0.13);\n        items[i].style.opacity = f.toFixed(3);\n        items[i].style.transform = 'translateY(' + ((1 - f) * 9).toFixed(1) + 'px)';\n      }\n    } catch (e) { revealInline(); }\n  }\n\n  \/\/ M\u00d3VIL: revelado natural al entrar en pantalla (clases CSS + transiciones).\n  var ioStarted = false;\n  function startIO(){\n    if (ioStarted) return; ioStarted = true;\n    var fire = function(){ section.classList.add('is-live'); };\n    if ('IntersectionObserver' in window) {\n      var io = new IntersectionObserver(function (es) {\n        es.forEach(function (en) { if (en.isIntersecting) { fire(); io.disconnect(); } });\n      }, { threshold: 0.25 });\n      io.observe(section);\n    } else { fire(); }\n    setTimeout(fire, 12000);   \/\/ red de seguridad\n  }\n\n  function setMode(){\n    if (mq.matches) {                 \/\/ m\u00f3vil: revelado por IO + CSS\n      clearInline();\n      section.classList.add('vl-cmp-prep');\n      startIO();\n    } else {                          \/\/ escritorio: scroll fijado\n      section.classList.remove('vl-cmp-prep', 'is-live');\n      update();\n    }\n  }\n\n  window.addEventListener('scroll', update, { passive: true });\n  window.addEventListener('resize', setMode, { passive: true });\n  if (mq.addEventListener) mq.addEventListener('change', setMode);\n  setMode();\n  \/\/ Red de seguridad para escritorio: mantiene la sincron\u00eda aunque fallen los eventos de scroll.\n  var ticks = 0, iv = setInterval(function(){ if (!mq.matches) update(); if (++ticks > 120) clearInterval(iv); }, 250);\n})();\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CASOS DE USO \u2014 CONSTELACI\u00d3N: salida desde el centro al hacer scroll\n     + flotaci\u00f3n continua de los nodos con las l\u00edneas sigui\u00e9ndolos\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n\/* Puntos de fondo que se iluminan alrededor del cursor (hero, pain, casos de uso) \u2014 independiente *\/\n(function () {\n  'use strict';\n  if (window.matchMedia('(hover: none)').matches) return;\n  [].slice.call(document.querySelectorAll('.vl-dots')).forEach(function (sec) {\n    sec.addEventListener('pointermove', function (e) {\n      var r = sec.getBoundingClientRect();\n      sec.style.setProperty('--cx', (e.clientX - r.left) + 'px');\n      sec.style.setProperty('--cy', (e.clientY - r.top) + 'px');\n      sec.classList.add('is-lit');\n    }, { passive: true });\n    sec.addEventListener('pointerleave', function () { sec.classList.remove('is-lit'); });\n  });\n})();\n\/* Mensaje de la tira de proceso: aparece SOLO al pasar el rat\u00f3n, justo debajo de la etapa\n   enfocada y alineado con ella en X (la tarjeta se mueve siguiendo al rat\u00f3n entre etapas). *\/\n(function () {\n  'use strict';\n  var cap = document.getElementById('vl-chev-cap');\n  var flow = document.querySelector('.vl-chevflow');\n  if (!cap || !flow) return;\n  var chevs = [].slice.call(flow.querySelectorAll('.vl-chev'));\n  function isStacked() { return window.innerWidth <= 768; }\n  function focus(ch) {\n    chevs.forEach(function (c) { c.classList.toggle('vl-on', c === ch); });\n    flow.classList.add('vl-has-focus');\n    cap.textContent = ch.getAttribute('data-desc') || '';\n    if (isStacked()) { cap.style.left = ''; cap.classList.add('is-on'); return; }\n    var fw = flow.clientWidth;\n    var cw = cap.offsetWidth;\n    var center = ch.offsetLeft + ch.offsetWidth \/ 2;\n    var left = Math.max(0, Math.min(center - cw \/ 2, fw - cw));\n    cap.style.left = left + 'px';\n    cap.classList.add('is-on');\n  }\n  function clear() {\n    chevs.forEach(function (c) { c.classList.remove('vl-on'); });\n    flow.classList.remove('vl-has-focus');\n    cap.classList.remove('is-on');\n  }\n  chevs.forEach(function (ch) {\n    ch.addEventListener('pointerenter', function () { focus(ch); });\n  });\n  flow.addEventListener('pointerleave', clear);\n})();\n(function () {\n  'use strict';\n  var cst = document.querySelector('.vl-constellation');\n  if (!cst) return;\n  var svg = cst.querySelector('.vl-cst-svg');\n  var nodes = [].slice.call(cst.querySelectorAll('.vl-cst-node'));\n  if (!svg || nodes.length < 2) return;\n  var SVGNS = 'http:\/\/www.w3.org\/2000\/svg';\n  var edges = [[0,1],[1,2],[2,3],[3,4],[4,5],[5,0],[1,4],[0,3]];\n  var lines = [];\n  \/\/ fase de flotaci\u00f3n distinta por nodo \u2192 movimiento org\u00e1nico\n  var phase = nodes.map(function (_, i) { return i * 1.9; });\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function isMobile(){ return window.matchMedia('(max-width: 1024px)').matches; }\n\n  function buildLines(){\n    while (svg.firstChild) svg.removeChild(svg.firstChild);\n    lines = [];\n    if (isMobile()) return;\n    var r = cst.getBoundingClientRect();\n    svg.setAttribute('viewBox', '0 0 ' + r.width + ' ' + r.height);\n    edges.forEach(function () {\n      var ln = document.createElementNS(SVGNS, 'line');\n      ln.setAttribute('class', 'vl-cst-line');\n      svg.appendChild(ln);\n      lines.push(ln);\n    });\n  }\n\n  function dotCenter(n, r){\n    var d = n.querySelector('.vl-cst-dot').getBoundingClientRect();\n    return { x: d.left - r.left + d.width \/ 2, y: d.top - r.top + d.height \/ 2 };\n  }\n\n  function updateLines(){\n    if (isMobile() || !lines.length) return;\n    var r = cst.getBoundingClientRect();\n    edges.forEach(function (e, k) {\n      var a = dotCenter(nodes[e[0]], r), b = dotCenter(nodes[e[1]], r);\n      var ln = lines[k];\n      ln.setAttribute('x1', a.x); ln.setAttribute('y1', a.y);\n      ln.setAttribute('x2', b.x); ln.setAttribute('y2', b.y);\n    });\n  }\n\n  var running = false, rafId = null, t0 = null;\n\n  function frame(ts){\n    if (!running) return;\n    if (t0 == null) t0 = ts;\n    var time = (ts - t0) \/ 1000;\n    var r = cst.getBoundingClientRect();\n    var vh = window.innerHeight || 800;\n    \/\/ progreso de scroll: 0 al entrar por abajo \u2192 1 cuando la secci\u00f3n sube ~60% del viewport\n    var prog = (vh - r.top) \/ (vh * 0.6);\n    prog = Math.max(0, Math.min(1, prog));\n    var eased = 1 - Math.pow(1 - prog, 3);   \/\/ easeOutCubic\n    var cx = r.width \/ 2, cy = r.height \/ 2;\n    for (var i = 0; i < nodes.length; i++) {\n      var n = nodes[i];\n      var fx = parseFloat(n.style.getPropertyValue('--x')) \/ 100 * r.width;\n      var fy = parseFloat(n.style.getPropertyValue('--y')) \/ 100 * r.height;\n      \/\/ del centro (prog 0) a su posici\u00f3n final (prog 1)\n      var px = cx + (fx - cx) * eased;\n      var py = cy + (fy - cy) * eased;\n      \/\/ flotaci\u00f3n sutil y continua\n      var amp = 6;\n      var dx = Math.sin(time * 0.55 + phase[i]) * amp;\n      var dy = Math.cos(time * 0.47 + phase[i] * 1.3) * amp;\n      var s = 0.62 + 0.38 * eased;\n      var tx = (px - fx) + dx;\n      var ty = (py - fy) + dy;\n      n.style.transform = 'translate(-50%,-50%) translate(' + tx.toFixed(1) + 'px,' + ty.toFixed(1) + 'px) scale(' + s.toFixed(3) + ')';\n    }\n    updateLines();\n    rafId = requestAnimationFrame(frame);\n  }\n\n  function start(){\n    if (running || isMobile()) return;\n    running = true; t0 = null;\n    rafId = requestAnimationFrame(frame);\n  }\n  function stop(){ running = false; if (rafId) cancelAnimationFrame(rafId); rafId = null; }\n\n  function settleStatic(){\n    \/\/ reduced-motion o sin animaci\u00f3n: nodos en su sitio y l\u00edneas una vez\n    nodes.forEach(function (n) { n.style.transform = 'translate(-50%,-50%) scale(1)'; });\n    buildLines();\n    requestAnimationFrame(updateLines);\n  }\n\n  buildLines();\n\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (en) {\n      if (en.isIntersecting) {\n        cst.classList.add('is-drawn');\n        if (reduce || isMobile()) { settleStatic(); }\n        else { start(); }\n      } else {\n        stop();\n      }\n    });\n  }, { threshold: 0.05 });\n  io.observe(cst);\n\n  var rt;\n  window.addEventListener('resize', function () {\n    clearTimeout(rt);\n    rt = setTimeout(function () {\n      stop();\n      if (isMobile()) {\n        nodes.forEach(function (n) { n.style.transform = ''; });   \/\/ que mande el CSS de m\u00f3vil\n        buildLines();\n      } else {\n        buildLines();\n        if (cst.classList.contains('is-drawn')) {\n          if (reduce) settleStatic(); else start();\n        }\n      }\n    }, 200);\n  }, { passive: true });\n})();\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CTA FINAL \u2014 la p\u00edldora \"se asienta\" (de un poco m\u00e1s grande a su tama\u00f1o)\n     seg\u00fan se acerca al centro del viewport al hacer scroll\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- El CTA \"Comenzar gratis\" del header m\u00f3vil ahora es GLOBAL (Code Snippets id 25), ya no se inyecta por landing. -->\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     ORBE animado del Hero (sustituye al engranaje) \u2014 canvas ligero, en bucle\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function(){\n  'use strict';\n  var SIZE = 72, K = SIZE \/ 640;\n\n  function initOrb(wrap){\n  var mainC = wrap.querySelector('[data-orb-main]');\n  var glowC = wrap.querySelector('[data-orb-glow]');\n  if (!mainC || !glowC || !mainC.getContext) return;\n  var mouse = { x:0, y:0, influence:0 }, sm = { x:0, y:0, influence:0 };\n\n  document.addEventListener('mousemove', function(e){\n    var rect = wrap.getBoundingClientRect();\n    var cx = rect.left + rect.width\/2, cy = rect.top + rect.height\/2;\n    var scale = SIZE \/ (rect.width || 22);\n    mouse.x = (e.clientX - cx) * scale;\n    mouse.y = (e.clientY - cy) * scale;\n    var dist = Math.sqrt((e.clientX-cx)*(e.clientX-cx) + (e.clientY-cy)*(e.clientY-cy));\n    mouse.influence = Math.max(0, 1 - dist\/40);   \/\/ solo reacciona si el rat\u00f3n est\u00e1 MUY cerca del orbe (~40px)\n  }, { passive: true });\n  document.addEventListener('mouseleave', function(){ mouse.influence = 0; });\n\n  function Orb(canvas){\n    this.ctx = canvas.getContext('2d');\n    canvas.width = SIZE; canvas.height = SIZE;\n    this.center = SIZE\/2; this.radius = SIZE\/2; this.time = 0;\n    this.blobs = [\n      { color:[231,254,21],  opacity:1.00, sx:1.00, sy:0.80, px:0,    py:0.5, orbit:190*K, baseR:420*K },\n      { color:[128,141,12],  opacity:0.90, sx:0.85, sy:1.05, px:3.14, py:4.2, orbit:200*K, baseR:380*K },\n      { color:[255,225,76],  opacity:0.85, sx:1.10, sy:0.75, px:1.5,  py:0.8, orbit:185*K, baseR:400*K },\n      { color:[205,226,19],  opacity:0.80, sx:0.80, sy:1.15, px:4.8,  py:2.2, orbit:170*K, baseR:370*K },\n      { color:[255,237,148], opacity:0.55, sx:0.65, sy:0.55, px:2.5,  py:5.5, orbit:140*K, baseR:400*K }\n    ];\n    for (var i=0;i<this.blobs.length;i++){ this.blobs[i].r=this.blobs[i].baseR; this.blobs[i].x=this.center; this.blobs[i].y=this.center; }\n  }\n  Orb.prototype.update = function(dt, mi){\n    this.time += dt;\n    \/\/ Los colores se mueven por la SUPERFICIE de la esfera (3D real):\n    \/\/ cada mancha vive en la esfera (longitud que rota + latitud que oscila) y se\n    \/\/ proyecta a 2D. La profundidad (z) modula su tama\u00f1o y opacidad \u2192 la cara\n    \/\/ oculta se aten\u00faa y la frontal brilla, como una esfera girando.\n    \/\/ El rat\u00f3n cerca solo ACELERA el giro (nada se desplaza en X\/Y).\n    this.spin = (this.spin || 0) + dt * (0.25 + mi.influence * 2.2);\n    var R = this.radius * 0.62;                                  \/\/ radio de la esfera interior\n    for (var i=0;i<this.blobs.length;i++){\n      var b=this.blobs[i], t=this.time;\n      var th = b.px + t * b.sx * 0.35 + this.spin;               \/\/ longitud (gira)\n      var ph = b.py + Math.sin(t * b.sy * 0.45 + b.px) * 0.9;    \/\/ latitud (oscila)\n      var sp = Math.sin(ph), cp = Math.cos(ph);\n      var x = Math.cos(th) * sp, y = cp, z = Math.sin(th) * sp;  \/\/ punto sobre la esfera unidad\n      var depth = (z + 1) \/ 2;                                    \/\/ 0 = detr\u00e1s, 1 = de frente\n      b.x = this.center + x * R;\n      b.y = this.center + y * R;\n      b.r = b.baseR * (0.55 + 0.5 * depth);\n      b.alpha = 0.30 + 0.70 * depth;\n    }\n  };\n  Orb.prototype.render = function(){\n    var ctx=this.ctx, s=SIZE;\n    ctx.clearRect(0,0,s,s);\n    ctx.save();\n    ctx.beginPath(); ctx.arc(this.center,this.center,this.radius,0,Math.PI*2); ctx.clip();\n    ctx.fillStyle='#FDFFE8'; ctx.fillRect(0,0,s,s);\n    for (var i=0;i<this.blobs.length;i++){\n      var b=this.blobs[i], c=b.color, a=b.opacity * (b.alpha == null ? 1 : b.alpha);\n      var grad=ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,Math.max(0.1,b.r));\n      grad.addColorStop(0,    'rgba('+c[0]+','+c[1]+','+c[2]+','+a+')');\n      grad.addColorStop(0.2,  'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.82)+')');\n      grad.addColorStop(0.45, 'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.45)+')');\n      grad.addColorStop(0.7,  'rgba('+c[0]+','+c[1]+','+c[2]+','+(a*0.15)+')');\n      grad.addColorStop(1,    'rgba('+c[0]+','+c[1]+','+c[2]+',0)');\n      ctx.fillStyle=grad; ctx.fillRect(0,0,s,s);\n    }\n    ctx.restore();\n  };\n\n  var main, glow;\n  try { main = new Orb(mainC); glow = new Orb(glowC); } catch(e){ return; }\n  for (var i=0;i<glow.blobs.length;i++){ var m=main.blobs[i], g=glow.blobs[i]; g.px=m.px; g.py=m.py; g.sx=m.sx; g.sy=m.sy; g.orbit=m.orbit; }\n\n  var last = performance.now(), running = false, rafId = 0;\n  function animate(now){\n    if (!running) return;\n    try {\n      var dt = Math.min(0.05, (now-last)\/1000); last = now;\n      var lerp = 1 - Math.pow(0.15, dt);\n      sm.x += (mouse.x-sm.x)*lerp; sm.y += (mouse.y-sm.y)*lerp; sm.influence += (mouse.influence-sm.influence)*lerp;\n      main.update(dt, sm); glow.update(dt, sm); main.render(); glow.render();\n    } catch(e){ running = false; return; }\n    rafId = requestAnimationFrame(animate);\n  }\n  function start(){ if (!running){ running = true; last = performance.now(); rafId = requestAnimationFrame(animate); } }\n  function stop(){ running = false; if (rafId) cancelAnimationFrame(rafId); }\n  if ('IntersectionObserver' in window){\n    new IntersectionObserver(function(es){ es.forEach(function(en){ en.isIntersecting ? start() : stop(); }); }, { threshold: 0 }).observe(wrap);\n  }\n  start();\n  }\n\n  var _orbs = document.querySelectorAll('.vl-orb');\n  for (var _oi = 0; _oi < _orbs.length; _oi++) initOrb(_orbs[_oi]);\n  \/\/ Expuesto para orbes creados din\u00e1micamente (p. ej. el avatar de la burbuja \"Borrador generado\")\n  window.vlInitOrb = function (el){ if (el) initOrb(el); };\n})();\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CTA FINAL \u2014 la p\u00edldora \"se asienta\"\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-cta-section');\n  if (!section) return;\n  var track = section.querySelector('.vl-cta-track');\n  var pill = document.getElementById('vl-cta-pill');\n  if (!track || !pill) return;\n  var title = pill.querySelector('h2');\n  var subtitle = pill.querySelector('p');\n  var buttons = pill.querySelector('div');   \/\/ contenedor de los botones\n  pill.classList.add('is-shown');            \/\/ visible (anula el opacity:0 de entrada)\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function rng(p, a, b){ return Math.max(0, Math.min(1, (p - a) \/ (b - a))); }\n\n  \/\/ ESTADO COMPLETO (seguro): p\u00edldora negra, t\u00edtulo blanco a tama\u00f1o normal, subt\u00edtulo y botones visibles.\n  function formFull(){\n    pill.style.backgroundColor = '#161616';\n    pill.style.boxShadow = '0 26px 64px -28px rgba(0,0,0,0.5)';\n    if (title) { title.style.opacity = '1'; title.style.transform = 'none'; title.style.setProperty('color', '#FFFFFF', 'important'); }\n    if (subtitle) { subtitle.style.opacity = '1'; subtitle.style.transform = 'none'; }\n    if (buttons) { buttons.style.opacity = '1'; buttons.style.transform = 'none'; }\n  }\n\n  if (reduce) { formFull(); return; }\n\n  function update(){\n    try {\n      var rect = track.getBoundingClientRect();\n      var scrollable = track.offsetHeight - window.innerHeight;\n      if (scrollable <= 0) { formFull(); return; }     \/\/ m\u00f3vil\/tablet (sin scroll-jack)\n      var p = Math.max(0, Math.min(1, (-rect.top) \/ scrollable));\n      var vh = window.innerHeight || 800;\n      var ent = Math.max(0, Math.min(1, 1 - rect.top \/ vh));   \/\/ ENTRADA de la secci\u00f3n (0 al asomar \u2192 1 al fijarse)\n\n      \/\/ 1) FRASE: GRANDE desde el inicio; APARECE (fade) seg\u00fan ENTRA la secci\u00f3n (mucho antes, sin tanto blanco)\n      \/\/    y luego se comprime para colocarse dentro de la p\u00edldora. (Sin zoom de escala.)\n      if (title) {\n        title.style.opacity = rng(ent, 0.40, 0.62).toFixed(3);\n        var shrink = rng(p, 0.18, 0.52);\n        var ts = 1.28 - shrink * 0.28;                   \/\/ 1.28 (grande) \u2192 1.0 (cabe en la p\u00edldora)\n        title.style.transform = 'scale(' + ts.toFixed(3) + ')';\n      }\n      \/\/ 2) Se FORMA la p\u00edldora (gris del fondo \u2192 negra)\n      var fq = rng(p, 0.22, 0.52);\n      var L = Math.round(248 - fq * 226);              \/\/ 248 (gris) \u2192 22 (negro)\n      pill.style.backgroundColor = 'rgb(' + L + ',' + L + ',' + L + ')';\n      pill.style.boxShadow = fq > 0.04 ? '0 26px 64px -28px rgba(0,0,0,' + (0.5 * fq).toFixed(2) + ')' : 'none';\n      \/\/ Color del t\u00edtulo: SIEMPRE alto contraste (negro sobre claro, blanco sobre oscuro)\n      if (title) title.style.setProperty('color', L > 140 ? '#161616' : '#FFFFFF', 'important');\n      \/\/ 3) Subt\u00edtulo + botones: con la p\u00edldora ya oscura\n      var rev = rng(p, 0.56, 0.82);\n      if (subtitle) { subtitle.style.opacity = rev.toFixed(3); subtitle.style.transform = 'translateY(' + ((1 - rev) * 8).toFixed(1) + 'px)'; }\n      if (buttons) { buttons.style.opacity = rev.toFixed(3); buttons.style.transform = 'translateY(' + ((1 - rev) * 8).toFixed(1) + 'px)'; }\n    } catch (e) { formFull(); }\n  }\n\n  window.addEventListener('scroll', update, { passive: true });\n  window.addEventListener('resize', update, { passive: true });\n  \/\/ Red de seguridad: intervalo que mantiene la sincron\u00eda aunque fallen los eventos de scroll.\n  var ticks = 0, iv = setInterval(function(){ update(); if (++ticks > 140) clearInterval(iv); }, 250);\n  update();\n})();\n<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PAIN CARDS \u2014 spotlight que sigue al cursor + tilt 3D + contadores\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-pain-section');\n  if (!section) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var noHover = window.matchMedia('(hover: none)').matches;\n  var cards = [].slice.call(section.querySelectorAll('.vl-pain-card'));\n\n  \/\/ --- Spotlight + tilt 3D (solo con rat\u00f3n) ---\n  if (!reduce && !noHover) {\n    var ticking = false, lastE = null;\n    function apply(){\n      ticking = false;\n      var e = lastE; if (!e) return;\n      var r = section.getBoundingClientRect();\n      section.style.setProperty('--mx', (e.clientX - r.left) + 'px');\n      section.style.setProperty('--my', (e.clientY - r.top) + 'px');\n      cards.forEach(function (card) {\n        var cr = card.getBoundingClientRect();\n        var inner = card.querySelector('.vl-pain-inner');\n        if (!inner) return;\n        if (e.clientX >= cr.left && cr.right >= e.clientX && e.clientY >= cr.top && cr.bottom >= e.clientY) {\n          var px = (e.clientX - cr.left) \/ cr.width - 0.5;\n          var py = (e.clientY - cr.top) \/ cr.height - 0.5;\n          inner.style.transform = 'rotateY(' + (px * 9).toFixed(2) + 'deg) rotateX(' + (-py * 9).toFixed(2) + 'deg)';\n        } else {\n          inner.style.transform = '';\n        }\n      });\n    }\n    section.addEventListener('pointermove', function (e) {\n      lastE = e; section.classList.add('is-spot');\n      if (!ticking) { ticking = true; requestAnimationFrame(apply); }\n    }, { passive: true });\n    section.addEventListener('pointerleave', function () {\n      section.classList.remove('is-spot');\n      cards.forEach(function (c) { var i = c.querySelector('.vl-pain-inner'); if (i) i.style.transform = ''; });\n    });\n  }\n\n  \/\/ Los contadores se animan 100% en CSS (ver @keyframes vl-cnt-*). Ya no se gestionan por JS.\n})();\n<\/script>\n\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n\/* Tira de perfiles (.vl-segflow): foco por clases (no :hover) + tarjeta de mensaje\n   centrada bajo la ficha enfocada. Portado literalmente de la referencia. *\/\n(function () {\n  'use strict';\n  var cap = document.getElementById('vl-seg-cap');\n  var flow = document.querySelector('.vl-segflow');\n  if (!cap || !flow) return;\n  var segs = [].slice.call(flow.querySelectorAll('.vl-seg'));\n  function isStacked() { return window.innerWidth <= 1024; }\n  function focus(el) {\n    segs.forEach(function (s) { s.classList.toggle('vl-on', s === el); });\n    flow.classList.add('vl-has-focus');\n    var d = el.querySelector('.vl-seg-desc');\n    cap.textContent = d ? d.textContent.trim() : '';\n    if (isStacked()) { cap.style.left = ''; cap.classList.add('is-on'); return; }\n    var fw = flow.clientWidth;\n    var cw = cap.offsetWidth;\n    var center = el.offsetLeft + el.offsetWidth \/ 2;\n    var left = Math.max(0, Math.min(center - cw \/ 2, fw - cw));\n    cap.style.left = left + 'px';\n    cap.classList.add('is-on');\n  }\n  function clear() {\n    segs.forEach(function (s) { s.classList.remove('vl-on'); });\n    flow.classList.remove('vl-has-focus');\n    cap.classList.remove('is-on');\n  }\n  segs.forEach(function (el) {\n    el.addEventListener('pointerenter', function () { focus(el); });\n  });\n  flow.addEventListener('pointerleave', clear);\n})();\n<\/script>\n\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n\/* MOCKUP VIVO del hero: cronometro sincronizado con el bucle, onda que se rellena\n   como una marea (sin playhead), conversacion con scroll y timestamps por intervencion.\n   Sin operadores '&lt;' en comparaciones (trampa del troceador de WordPress): solo '>' y '>='. *\/\n(function(){\n  'use strict';\n  var card = document.getElementById('vl-pm-hero');\n  if (!card) return;\n  var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (reduced) return;   \/* estatico: 2 primeras intervenciones completas, cronometro fijo, onda medio pintada (CSS) *\/\n\n  var timerEl = card.querySelector('[data-pm-timer]');\n  var wave    = card.querySelector('.vl-pm-wave--live');\n  var win     = card.querySelector('.vl-pm-chatwin');\n  var scroll  = card.querySelector('[data-pm-scroll]');\n  if (!timerEl || !wave || !win || !scroll) return;\n\n  var BASE  = 252;    \/* 04:12 \u2014 inicio del bucle *\/\n  var SPEED = 19;     \/* ms por caracter (mas agil) *\/\n  var GAP   = 12;     \/* margen entre mensajes (css .vl-pm-msg) *\/\n  var LEAD  = 400;    \/* la 1a intervencion entra enseguida *\/\n  var READ  = 750;    \/* pausa de lectura tras terminar de escribir *\/\n  var ENDHOLD = 1900; \/* respiro al final antes de reiniciar el bucle *\/\n  function fmt(cs){ var mm = Math.floor(cs \/ 60), ss = cs % 60; return (mm > 9 ? '' + mm : '0' + mm) + ':' + (ss > 9 ? '' + ss : '0' + ss); }\n\n  \/* Las 4 intervenciones se leen del HTML (asi TranslatePress puede traducirlas) *\/\n  var originals = [].slice.call(scroll.querySelectorAll('.vl-pm-msg'));\n  if (originals.length === 0) return;\n  var msgs = originals.map(function(node){\n    return {\n      tpl:  node.cloneNode(true),\n      text: node.querySelector('.vl-pm-ghost').textContent\n    };\n  });\n  \/* Agenda encadenada: cada intervencion entra en cuanto la anterior acaba de escribirse + una breve pausa.\n     Asi el ritmo no depende de timestamps falsos con huecos largos. *\/\n  var acc = LEAD;\n  msgs.forEach(function(m){\n    m.spawnAt = acc;\n    m.typeDur = Math.max(340, m.text.length * SPEED);\n    acc = acc + m.typeDur + READ;\n  });\n  var T = acc + ENDHOLD;   \/* duracion real del ciclo, calculada del contenido *\/\n\n  card.classList.add('vl-pm-live');\n\n  \/* \u2014 Altura fija de la ventana = el par de intervenciones consecutivas mas alto \u2014 *\/\n  function measureWin(){\n    var rack = document.createElement('div');\n    rack.style.cssText = 'position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none;';\n    msgs.forEach(function(m){\n      var c = m.tpl.cloneNode(true);\n      c.querySelector('.vl-pm-ghost').style.visibility = 'visible';\n      rack.appendChild(c);\n    });\n    win.appendChild(rack);\n    var hs = [].slice.call(rack.children).map(function(n){ return n.offsetHeight; });\n    win.removeChild(rack);\n    var best = 0, i;\n    for (i = 0; hs.length - 1 > i; i = i + 1) {\n      var pair = hs[i] + GAP + hs[i + 1];\n      if (pair > best) best = pair;\n    }\n    win.style.maxHeight = 'none';\n    win.style.height = best + 'px';\n  }\n\n  \/* \u2014 Geometria de las barras para la marea (se recalcula al redimensionar) \u2014 *\/\n  var bars = [].slice.call(wave.querySelectorAll('span'));\n  var geo = [];\n  function measureWave(){\n    var W = wave.clientWidth;\n    if (0 >= W) return;\n    geo = bars.map(function(b){ return { x: b.offsetLeft \/ W, w: b.offsetWidth \/ W }; });\n  }\n\n  scroll.innerHTML = '';   \/* en vivo, la conversacion se genera en streaming *\/\n  measureWin();\n  measureWave();\n  window.addEventListener('resize', function(){ measureWin(); measureWave(); });\n\n  \/* \u2014 Nueva intervencion: entra abajo, la lista sube con scroll suave y se poda lo antiguo \u2014 *\/\n  var curY = 0;\n  var typingIv = null;\n  function spawn(k){\n    var node = msgs[k].tpl.cloneNode(true);\n    var typed = node.querySelector('.vl-pm-typed');\n    typed.textContent = '';\n    var tsEl = node.querySelector('.vl-pm-ts');\n    if (tsEl) tsEl.textContent = fmt(BASE + Math.round(msgs[k].spawnAt \/ 1000));\n    \/* fundido de entrada suave (no aparece de golpe) *\/\n    node.style.opacity = '0';\n    node.style.transform = 'translateY(7px)';\n    node.style.transition = 'opacity .3s ease, transform .3s ease';\n    scroll.appendChild(node);\n    requestAnimationFrame(function(){ node.style.opacity = '1'; node.style.transform = 'translateY(0)'; });\n    var prev = node.previousElementSibling;\n    if (prev) {\n      curY = prev.offsetTop;\n      scroll.style.transform = 'translateY(-' + curY + 'px)';\n    }\n    \/* poda de nodos antiguos compensando el transform (sin salto visual) *\/\n    while (scroll.children.length > 6) {\n      var first = scroll.firstElementChild;\n      var hh = first.offsetHeight + GAP;\n      scroll.removeChild(first);\n      curY = curY - hh;\n      scroll.style.transition = 'none';\n      scroll.style.transform = 'translateY(-' + curY + 'px)';\n      void scroll.offsetHeight;\n      scroll.style.transition = '';\n    }\n    \/* maquina de escribir: desde la izquierda, con cursor parpadeante *\/\n    if (typingIv) { clearInterval(typingIv); typingIv = null; }\n    var i = 0, text = msgs[k].text;\n    var caret = document.createElement('i');\n    caret.className = 'vl-pm-caret';\n    typed.appendChild(caret);\n    typingIv = setInterval(function(){\n      i = i + 1;\n      typed.textContent = text.slice(0, i);\n      if (text.length > i) {\n        typed.appendChild(caret);\n      } else {\n        clearInterval(typingIv); typingIv = null;\n      }\n    }, SPEED);\n  }\n\n  \/* \u2014 Reloj unico del bucle: cronometro + marea + agenda de intervenciones \u2014 *\/\n  var t0 = performance.now(), lastE = -1, started = [];\n  function frame(now){\n    var e = (now - t0) % T;\n    if (lastE > e) started = [];            \/* nueva vuelta: el cronometro vuelve a 04:12 *\/\n    lastE = e;\n    var cs = BASE + Math.floor(e \/ 1000);\n    var mm = Math.floor(cs \/ 60), ss = cs % 60;\n    timerEl.textContent = (mm > 9 ? '' + mm : '0' + mm) + ':' + (ss > 9 ? '' + ss : '0' + ss);\n    var Pr = e \/ T;\n    bars.forEach(function(b, bi){\n      var g = geo[bi];\n      if (!g) return;\n      var f = (Pr - g.x) \/ g.w;\n      if (0 > f) f = 0;\n      if (f > 1) f = 1;\n      b.style.setProperty('--f', (f * 100).toFixed(1) + '%');\n    });\n    msgs.forEach(function(m, k){\n      if (started.indexOf(k) >= 0) return;\n      if (e >= m.spawnAt) { started.push(k); spawn(k); }\n    });\n    requestAnimationFrame(frame);\n  }\n  requestAnimationFrame(frame);\n})();\n<\/script>\n\n<script data-no-optimize=\"1\" data-no-defer=\"1\">\n\/* TESTIMONIOS \u2014 Sticky stack scroll (PORTADO LITERAL de la referencia buscador-oportunidades) *\/\n(function () {\n  'use strict';\n  var section = document.querySelector('.vl-tstack-section');\n  if (!section) return;\n  var track = section.querySelector('.vl-tstack-track');\n  var cards = section.querySelectorAll('.vl-tstack-card');\n  if (!track || cards.length === 0) return;\n\n  function updateStack() {\n    var rect = track.getBoundingClientRect();\n    var trackHeight = track.offsetHeight - window.innerHeight;\n    if (0 >= trackHeight) return;\n    var progress = -rect.top \/ trackHeight;\n    progress = Math.max(0, Math.min(1, progress));\n\n    var N = cards.length;\n    var topIdx = Math.min(N - 1, Math.floor(progress * N));\n\n    cards.forEach(function (card, idx) {\n      card.classList.remove('is-behind-1', 'is-behind-2', 'is-behind-3');\n      if (topIdx >= idx) {\n        card.classList.add('is-visible');\n        var depth = topIdx - idx;\n        if (depth === 1) card.classList.add('is-behind-1');\n        else if (depth === 2) card.classList.add('is-behind-2');\n        else if (depth >= 3) card.classList.add('is-behind-3');\n      } else {\n        card.classList.remove('is-visible');\n      }\n    });\n  }\n\n  var ticking = false;\n  function onScroll() {\n    if (!ticking) {\n      requestAnimationFrame(function () { updateStack(); ticking = false; });\n      ticking = true;\n    }\n  }\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', onScroll);\n  updateStack();\n  cards[0].classList.add('is-visible');\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Graba y documenta tus entrevistas telef\u00f3nicas de candidatos Haz tus entrevistas por tel\u00e9fono con total normalidad. Voicit graba el audio de la llamada, diferencia qui\u00e9n es el candidato y qui\u00e9n el entrevistador, y te devuelve el informe del candidato listo \u2014 sin que tengas que tomar una sola nota. Empezar gratis Solicitar demo 4.8 de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":"","rank_math_title":"Grabar entrevistas telef\u00f3nicas de candidatos con IA | Voicit","rank_math_description":"Graba tus entrevistas telef\u00f3nicas de candidatos: Voicit diferencia las voces y genera el informe del candidato autom\u00e1ticamente, sin tomar notas.","rank_math_focus_keyword":"grabar entrevistas telef\u00f3nicas"},"class_list":["post-9218","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages\/9218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/comments?post=9218"}],"version-history":[{"count":12,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages\/9218\/revisions"}],"predecessor-version":[{"id":9336,"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/pages\/9218\/revisions\/9336"}],"wp:attachment":[{"href":"https:\/\/voicit.com\/ca\/wp-json\/wp\/v2\/media?parent=9218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}