{"version":3,"file":"VoiceFunctionsCarousel.CaWVdwee.mjs","names":["React.useState","React.useRef","React.useId","React.useMemo","useMemo","React.useCallback","React.Fragment","React.useLayoutEffect","React.useEffect"],"sources":["https:/framerusercontent.com/modules/FhZjrt9JdQUD2LQzsiBC/sL1mLQDnD3g2ZspZLNAe/VoiceFunctionsCarousel.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useMemo}from\"react\";const fallbackImages=[{src:\"https://images.unsplash.com/photo-1644088379091-d574269d422f?crop=entropy&cs=srgb&fm=jpg&ixlib=rb-4.1.0&q=85&w=1200\",srcSet:\"\",alt:\"We understand your operation\"},{src:\"https://images.unsplash.com/photo-1462556791646-c201b8241a94?crop=entropy&cs=srgb&fm=jpg&ixlib=rb-4.1.0&q=85&w=1200\",srcSet:\"\",alt:\"We prioritize what drives impact\"},{src:\"https://images.unsplash.com/photo-1727434032773-af3cd98375ba?crop=entropy&cs=srgb&fm=jpg&ixlib=rb-4.1.0&q=85&w=1200\",srcSet:\"\",alt:\"We configure and train your agents\"},{src:\"https://images.unsplash.com/photo-1733723586975-9aaae6983459?crop=entropy&cs=srgb&fm=jpg&ixlib=rb-4.1.0&q=85&w=1200\",srcSet:\"\",alt:\"We deploy and optimize in production\"}];const EASE=\"cubic-bezier(0.22, 1, 0.36, 1)\";function stripLeadToken(line){return line.replace(/^\\s*(?:[-–—•●▪︎*]+|(?:\\d+|[\\u2460-\\u2473])[\\)\\].:-]?)\\s*/g,\"\").trim();}function clampText(value,max=120){if(value.length<=max)return value;return`${value.slice(0,Math.max(0,max-1)).trim()}…`;}// ---------------------------------------------------------------------------\n// Conversation playback\n//\n// Modelled on the transcript in the ElevenLabs Agents page: each message pops\n// in with a scale spring while the column below it slides up, and the text\n// inside reveals one word at a time. Content is authored per step in the\n// property controls — a step without a conversation renders none at all.\n// ---------------------------------------------------------------------------\nconst CONVO_START_MS=450// lets the card finish expanding first\n;const MSG_IN_MS=420;const MSG_EASE=\"cubic-bezier(0.34, 1.3, 0.64, 1)\"// slight overshoot, reads as a spring\n;const WORD_FADE_MS=200;const WORD_EASE=\"cubic-bezier(0, 0, 0.2, 1)\";const WORD_LEAD_MS=90// words start just after the bubble begins to pop\n;const PAUSE_SAME_SPEAKER_MS=520;const PAUSE_TURN_CHANGE_MS=800;// Crossfade between a card's two background clips. Each clip is ~4s and the\n// swap is driven by its own `ended` event, so the cut lands on the clip's\n// natural end instead of an arbitrary timer.\nconst VIDEO_FADE_MS=600;// Mismo tile de ruido (256x256, aleatorio por píxel) que usa el componente\n// \"Grain\" de las páginas de blog, para que la textura sea idéntica en todo el\n// sitio. El patrón anterior era un damero de radial-gradients que se repetía\n// cada 3-5 px y se leía como artefacto de compresión, no como grano.\nconst GRAIN_SCALE=.17;const GRAIN_TEXTURE=\"https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png\";const AGENT_MARKER=\"①\"// ①\n;const CUSTOMER_MARKER=\"②\"// ②\n;// The conversation is authored as one string, one message per line, because\n// Framer property controls cannot nest an Array inside an Array. The circled\n// markers are the same convention the `description` field already uses, and\n// they survive the Portuguese auto-translation pass unchanged — a plain\n// \"Silia:\" / \"Cliente:\" prefix would not be safe to rely on.\n//\n// ① Tengo martes 10am o miércoles 4pm.\n// ② Martes 10am.\nfunction parseConversation(raw,customerLabel){if(!raw)return[];return raw.split(/\\n+/g).map(line=>line.trim()).filter(Boolean).map(line=>{const isCustomer=line.charAt(0)===CUSTOMER_MARKER;const text=stripLeadToken(line);return{speaker:isCustomer?\"customer\":\"agent\",label:isCustomer?customerLabel:\"Silia\",words:text.length>0?text.split(/\\s+/g):[]};}).filter(message=>message.words.length>0);}// Word pace tracks word length so the reveal reads like speech, not a metronome.\nfunction wordStepMs(word){return Math.min(130,Math.max(60,Math.round(word.length*34)));}function buildTimeline(messages){const messageStarts=[];const wordStarts=[];let cursor=CONVO_START_MS;messages.forEach((message,index)=>{messageStarts.push(cursor);let wordCursor=cursor+WORD_LEAD_MS;const starts=[];message.words.forEach(word=>{starts.push(wordCursor);wordCursor+=wordStepMs(word);});wordStarts.push(starts);const spoken=wordCursor+WORD_FADE_MS;const next=messages[index+1];const pause=next&&next.speaker!==message.speaker?PAUSE_TURN_CHANGE_MS:PAUSE_SAME_SPEAKER_MS;cursor=spoken+pause;});const last=messages.length-1;let total=0;if(last>=0){const lastWords=wordStarts[last];const tail=lastWords.length>0?lastWords[lastWords.length-1]:messageStarts[last];total=tail+WORD_FADE_MS;}return{messageStarts,wordStarts,total};}function fullReveal(messages){return messages.map(message=>message.words.length);}function revealAt(timeline,elapsed){const out=[];for(let i=0;i=starts[shown])shown++;out.push(shown);}return out;}function sameReveal(a,b){if(a.length!==b.length)return false;for(let i=0;i0||pixelBlockSize>0||accentDensity>=0||Boolean(accentColor);const isStatic=useIsStaticRenderer();const[activeIndex,setActiveIndex]=React.useState(0);const[measuredWidth,setMeasuredWidth]=React.useState(0);const rootRef=React.useRef(null);const swipeStartX=React.useRef(null);const swipePointerId=React.useRef(null);const rawId=React.useId();const uid=React.useMemo(()=>rawId.replace(/[^a-zA-Z0-9_-]/g,\"\"),[rawId]);const cls=`fsc-${uid}`;const normalizedSteps=useMemo(()=>{const base=steps.length?steps:[{title:\"Step Title\",description:\"Add your step description in controls.\"}];return base.map((step,index)=>({title:step.title||`Step ${index+1}`,description:step.description||\"\",summaryLine:clampText((step.description||\"\").split(/\\n+/g).map(line=>stripLeadToken(line)).filter(Boolean)[0]||stripLeadToken(step.description||\"\"),140),// Authored per step. No conversation means no bubbles at all —\n // this component is shared with the homepage process section,\n // which must never render a chat.\n conversation:parseConversation(step.conversation||\"\",step.customerLabel?.trim()||\"Cliente\"),videoA:step.videoA||\"\",videoB:step.videoB||\"\",poster:step.poster?step.poster.trim():\"\",link:step.link?step.link.trim():\"\",image:step.image?.src?step.image:fallbackImages[index%fallbackImages.length]}));},[steps]);const total=normalizedSteps.length;const safeIndex=total>0?activeIndex%total:0;const mobileCutoff=React.useMemo(()=>Math.min(Math.max(360,breakpoint),640),[breakpoint]);const isMobileSlider=React.useMemo(()=>{if(orientation!==\"auto\")return false;return measuredWidth>0&&measuredWidth<=mobileCutoff;},[orientation,measuredWidth,mobileCutoff]);// ---- Conversation playback -------------------------------------------\n// The active step's conversation plays once, then stays complete. Coming\n// back to a step that already played shows it whole, with no replay.\nconst prefersReducedMotion=React.useMemo(()=>{if(isStatic)return true;if(typeof window===\"undefined\"||!window.matchMedia)return false;return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;},[isStatic]);const rawActiveConversation=React.useMemo(()=>{const all=normalizedSteps[safeIndex]?.conversation||[];// The narrow mobile slider only has room for the opening exchange.\nreturn isMobileSlider?all.slice(0,3):all;},[normalizedSteps,safeIndex,isMobileSlider]);// Framer hands array controls back as a fresh array on every render, so the\n// playback effect keys off the text itself. Without this the timeline would\n// restart on any unrelated re-render.\nconst conversationKey=React.useMemo(()=>rawActiveConversation.map(message=>message.speaker+\"|\"+message.words.join(\" \")).join(\"//\"),[rawActiveConversation]);const activeConversation=React.useMemo(()=>rawActiveConversation,// eslint-disable-next-line react-hooks/exhaustive-deps\n[conversationKey]);const allConversationsKey=React.useMemo(()=>normalizedSteps.map(step=>step.conversation.map(message=>message.words.join(\" \")).join(\"|\")).join(\"//\"),[normalizedSteps]);const[reveal,setReveal]=React.useState([]);const playedRef=React.useRef(new Set);const stackRef=React.useRef(null);const stackHeightRef=React.useRef(null);const[hasEnteredView,setHasEnteredView]=React.useState(isStatic);// New copy pasted in the editor invalidates what has already played.\nReact.useEffect(()=>{playedRef.current=new Set;},[allConversationsKey]);// Hold playback until the carousel is actually on screen.\nReact.useEffect(()=>{if(isStatic||hasEnteredView)return;const node=rootRef.current;if(!node)return;if(typeof window===\"undefined\"||!(\"IntersectionObserver\"in window)){setHasEnteredView(true);return;}const observer=new IntersectionObserver(entries=>{const entry=entries[0];if(!entry||!entry.isIntersecting)return;if(entry.intersectionRatio<.3)return;setHasEnteredView(true);observer.disconnect();},{threshold:[.3]});observer.observe(node);return()=>observer.disconnect();},[isStatic,hasEnteredView]);React.useEffect(()=>{if(activeConversation.length===0){setReveal([]);return;}const complete=fullReveal(activeConversation);if(isStatic||prefersReducedMotion||playedRef.current.has(safeIndex)){setReveal(complete);return;}if(!hasEnteredView){setReveal([]);return;}const timeline=buildTimeline(activeConversation);const startedAt=typeof performance!==\"undefined\"?performance.now():Date.now();let frame=0;let current=[];setReveal(current);const tick=()=>{const now=typeof performance!==\"undefined\"?performance.now():Date.now();const elapsed=now-startedAt;if(elapsed>=timeline.total){playedRef.current.add(safeIndex);setReveal(complete);return;}const next=revealAt(timeline,elapsed);if(!sameReveal(next,current)){current=next;setReveal(next);}frame=requestAnimationFrame(tick);};frame=requestAnimationFrame(tick);return()=>cancelAnimationFrame(frame);},[activeConversation,safeIndex,isStatic,prefersReducedMotion,hasEnteredView]);// FLIP the whole column instead of springing every bubble: when a message\n// mounts, the bottom-anchored stack grows and shoves the older messages up.\n// Offsetting the stack by that delta and releasing it makes the new bubble\n// rise from the bottom edge and the rest glide up with it.\nconst visibleCount=reveal.length;const stackCountRef=React.useRef(0);const flipTimer=React.useRef(null);// A slice change swaps the whole column out; nothing to glide from.\nuseIsomorphicLayoutEffect(()=>{stackHeightRef.current=null;stackCountRef.current=0;},[safeIndex]);useIsomorphicLayoutEffect(()=>{const node=stackRef.current;if(!node){stackHeightRef.current=null;stackCountRef.current=0;return;}const previousHeight=stackHeightRef.current;const previousCount=stackCountRef.current;const height=node.offsetHeight;stackHeightRef.current=height;stackCountRef.current=visibleCount;if(isStatic||prefersReducedMotion)return;// Only glide when exactly one message joined an existing column. The\n// first bubble just pops, and a jump straight to the finished state\n// (a step that already played) must not animate at all.\nif(previousCount<1||visibleCount!==previousCount+1)return;if(previousHeight==null||height<=previousHeight)return;const delta=height-previousHeight;node.style.transition=\"none\";node.style.transform=`translateY(${delta}px)`;// Force the offset to land before the transition is armed.\nvoid node.offsetHeight;node.style.transition=`transform ${MSG_IN_MS}ms ${MSG_EASE}`;node.style.transform=\"translateY(0)\";// Drop the transform once it has served its purpose. A resting\n// transform would keep this stack a backdrop root and flatten the\n// glass bubbles inside it.\nif(flipTimer.current)clearTimeout(flipTimer.current);flipTimer.current=setTimeout(()=>{node.style.transition=\"\";node.style.transform=\"\";flipTimer.current=null;},MSG_IN_MS+40);},[visibleCount,isStatic,prefersReducedMotion]);React.useEffect(()=>()=>{if(flipTimer.current)clearTimeout(flipTimer.current);},[]);// ---- Background video ------------------------------------------------\n// Only the active card mounts its clips. Under reduced motion or in the\n// static renderer nothing mounts at all and the still image shows through.\nconst rawActiveVideos=React.useMemo(()=>{if(isStatic||prefersReducedMotion)return[];const step=normalizedSteps[safeIndex];if(!step)return[];return[step.videoA,step.videoB].filter(src=>typeof src===\"string\"&&src.length>0);},[normalizedSteps,safeIndex,isStatic,prefersReducedMotion]);// Same trap as the conversation: Framer rebuilds the steps array on every\n// render, so keying the playback effect on the array identity would restart\n// the clip constantly. Key it on the URLs themselves.\nconst videoKey=React.useMemo(()=>rawActiveVideos.join(\"//\"),[rawActiveVideos]);const activeVideos=React.useMemo(()=>rawActiveVideos,// eslint-disable-next-line react-hooks/exhaustive-deps\n[videoKey]);const[videoTurn,setVideoTurn]=React.useState(0);const videoRefs=React.useRef([]);// A new card always starts on its first clip.\nReact.useEffect(()=>{setVideoTurn(0);},[safeIndex]);React.useEffect(()=>{if(activeVideos.length===0)return;const current=videoRefs.current[videoTurn%activeVideos.length];if(!current)return;current.currentTime=0;const played=current.play();// Autoplay can still be refused; the poster underneath keeps the card intact.\nif(played&&typeof played.catch===\"function\")played.catch(()=>{});// Rewind whichever clip just faded out, once it is no longer visible.\nconst timer=setTimeout(()=>{videoRefs.current.forEach((node,index)=>{if(!node||index===videoTurn%activeVideos.length)return;node.pause();node.currentTime=0;});},VIDEO_FADE_MS);return()=>clearTimeout(timer);},[activeVideos,videoTurn]);const advanceVideo=React.useCallback(()=>{setVideoTurn(turn=>turn+1);},[]);// `Silia Lead Modal` listens on window for this event and filters by key,\n// so the card CTA can open the very same lead form the page CTAs use\n// without this component knowing anything about it.\nconst openLeadModal=React.useCallback(event=>{// The card itself is a tab button; don't let the click switch slices.\nevent.stopPropagation();if(isStatic||typeof window===\"undefined\")return;window.dispatchEvent(new CustomEvent(\"silia:open-lead-modal\",{detail:{key:modalKey}}));},[isStatic,modalKey]);const focusTo=React.useCallback(index=>{React.startTransition(()=>setActiveIndex(index));},[setActiveIndex]);const goNext=React.useCallback(()=>{if(total<2)return;React.startTransition(()=>{setActiveIndex(prev=>(prev+1)%total);});},[total]);const goPrev=React.useCallback(()=>{if(total<2)return;React.startTransition(()=>{setActiveIndex(prev=>(prev-1+total)%total);});},[total]);React.useEffect(()=>{const element=rootRef.current;if(!element)return;const measure=()=>{const width=element.getBoundingClientRect().width;React.startTransition(()=>setMeasuredWidth(width));};measure();if(typeof ResizeObserver!==\"undefined\"){const observer=new ResizeObserver(measure);observer.observe(element);return()=>observer.disconnect();}if(typeof window!==\"undefined\"){window.addEventListener(\"resize\",measure);return()=>window.removeEventListener(\"resize\",measure);}},[]);const rootWidth=style?.width===\"100%\"?\"100%\":cardWidth;const rootHeight=style?.height===\"100%\"?\"100%\":cardHeight;// Motion timing: panel uses `duration`, while foreground content enters\n// after expansion has started and exits quickly on deactivation.\nconst inDelay=Math.min(220,Math.max(96,Math.round(duration*.22)));const inDuration=Math.max(220,Math.round(duration*.42));const outDuration=Math.min(160,Math.max(100,Math.round(duration*.24)));const css=`\n.${cls} {\n font-family: ${FONT_BODY};\n --fsc-collapsed: ${collapsedSize}px;\n --fsc-collapsed-radius: ${collapsedSize/2}px;\n --fsc-pad: 28px;\n --fsc-title: ${titleSize}px;\n --fsc-desc: ${descriptionSize}px;\n --fsc-arrow: 40px;\n --fsc-text-max: 74ch;\n /* Slack inside the clipped transcript viewport so bubble shadows survive. */\n --fsc-convo-bleed: 12px;\n}\n.${cls}-track {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n gap: ${gap}px;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n transform: translateX(0);\n --fsc-mobile-peek: 34px;\n --fsc-mobile-card: calc(100% - var(--fsc-mobile-peek));\n --fsc-mobile-step: 0px;\n}\n.${cls}-item {\n position: relative;\n display: block;\n flex: 0 0 max(var(--fsc-collapsed), 6%);\n min-width: 0;\n min-height: 0;\n padding: 0;\n border: none;\n appearance: none;\n background-color: #EEEEEE;\n border-radius: var(--fsc-collapsed-radius);\n overflow: hidden;\n cursor: pointer;\n text-align: left;\n -webkit-tap-highlight-color: transparent;\n isolation: isolate;\n ${isStatic?\"\":`transition: flex-grow ${duration}ms ${EASE}, border-radius ${duration}ms ${EASE};`}\n}\n.${cls}-item[data-active=\"true\"] {\n flex: 1 1 0%;\n border-radius: ${radius}px;\n cursor: default;\n}\n.${cls}-item:focus-visible {\n outline: 2px solid ${titleColor};\n outline-offset: 2px;\n}\n.${cls}-media {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n z-index: 0;\n transform: scale(1);\n ${isStatic?\"\":`transition: transform ${duration}ms ${EASE};`}\n}\n.${cls}-item[data-active=\"true\"] .${cls}-media {\n ${isStatic?\"\":`animation: ${cls}-media-settle ${duration}ms ${EASE} both;`}\n}\n@keyframes ${cls}-media-settle {\n 0% { transform: scale(1.02); }\n 100% { transform: scale(1); }\n}\n/* Video sits on top of the still, which stays as poster and as the background\n for the collapsed slices. Only the active card mounts video, so the hero\n downloads two clips instead of twelve. */\n.${cls}-video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n z-index: 0;\n opacity: 0;\n pointer-events: none;\n ${isStatic?\"\":`transition: opacity ${VIDEO_FADE_MS}ms linear;`}\n}\n.${cls}-video[data-on=\"true\"] {\n opacity: 1;\n}\n.${cls}-dim,\n.${cls}-scrim {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n ${isStatic?\"\":`transition: opacity ${duration}ms ${EASE};`}\n}\n.${cls}-dim {\n background: #000000;\n opacity: ${collapsedDim};\n}\n.${cls}-item[data-active=\"true\"] .${cls}-dim {\n opacity: 0;\n}\n.${cls}-scrim {\n background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,${scrimStrength}) 100%);\n opacity: 0;\n}\n.${cls}-item[data-active=\"true\"] .${cls}-scrim {\n opacity: 1;\n}\n/* Vintage grain over the footage. Sits above the media at z-index 2, below\n the copy and the transcript, so the text never gets textured. */\n.${cls}-grain {\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n opacity: ${(grainStrength*GRAIN_SCALE*.6).toFixed(3)};\n background-image: url(\"${GRAIN_TEXTURE}\");\n background-repeat: repeat;\n ${isStatic?\"\":`animation: ${cls}-grain-boil 1.1s steps(1, end) infinite;`}\n}\n.${cls}-item[data-active=\"true\"] .${cls}-grain {\n opacity: ${(grainStrength*GRAIN_SCALE).toFixed(3)};\n}\n@keyframes ${cls}-grain-boil {\n 0% { background-position: 0px 0px; }\n 10% { background-position: -37px 19px; }\n 20% { background-position: 61px -43px; }\n 30% { background-position: -83px -11px; }\n 40% { background-position: 29px 67px; }\n 50% { background-position: -101px 41px; }\n 60% { background-position: 73px -79px; }\n 70% { background-position: -19px 103px; }\n 80% { background-position: 91px 13px; }\n 90% { background-position: -53px -61px; }\n 100% { background-position: 0px 0px; }\n}\n.${cls}-content {\n position: absolute;\n left: var(--fsc-pad);\n right: var(--fsc-pad);\n top: var(--fsc-pad);\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n gap: 20px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(8px);\n pointer-events: none;\n z-index: 3;\n ${isStatic?\"\":`transition: opacity ${outDuration}ms linear, transform ${outDuration}ms ${EASE}, visibility 0ms linear 0ms;`}\n}\n.${cls}-item[data-active=\"true\"] .${cls}-content {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n ${isStatic?\"\":`transition: opacity ${inDuration}ms linear ${inDelay}ms, transform ${inDuration}ms ${EASE} ${inDelay}ms, visibility 0ms linear 0ms;`}\n}\n.${cls}-copy {\n min-width: 0;\n max-width: min(48%, 360px);\n}\n.${cls}-title {\n margin: 0;\n color: ${titleColor};\n font-size: clamp(12px, 0.95vw, 14px);\n line-height: 1.2;\n font-weight: 450;\n letter-spacing: -0.01em;\n /* La pastilla es una etiqueta, no un parrafo: partir \"Recordatorio\n proactivo\" en dos lineas la engorda sin ganar nada. Que se extienda.\n flex: none para que nunca se encoja por debajo de su texto. */\n white-space: nowrap;\n flex: none;\n}\n.${cls}-agent-head {\n display: inline-flex;\n align-items: center;\n /* Ancho segun el texto. Nada de max-width: la columna de contenido es\n mas angosta que la pastilla en tablet, y al recortarla el titulo (que\n por defecto puede encogerse) se salia del fondo redondeado. La card\n recorta con overflow si algun dia no cupiera. */\n align-self: flex-start;\n width: max-content;\n gap: 7px;\n padding: 5px 9px;\n border-radius: 999px;\n background: rgba(0, 0, 0, 0.36);\n border: 1px solid rgba(255, 255, 255, 0.24);\n backdrop-filter: blur(4px);\n opacity: 0;\n transform: translateY(7px);\n ${isStatic?\"\":`transition: opacity ${outDuration}ms linear, transform ${outDuration}ms ${EASE};`}\n}\n/* A live status light. The dot is drawn with pseudo-elements rather than an\n inline : an inline SVG sits on the text baseline, so its descender gap\n pushed the dot off-centre inside the disc. Absolute + translate(-50%,-50%)\n centres it exactly, at any size. */\n.${cls}-agent-icon {\n position: relative;\n flex: none;\n width: 12px;\n height: 12px;\n border-radius: 999px;\n background: rgba(0, 0, 0, 0.3);\n color: ${accentColor};\n}\n.${cls}-agent-icon::before,\n.${cls}-agent-icon::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n border-radius: 999px;\n}\n.${cls}-agent-icon::after {\n background: currentColor;\n transform: translate(-50%, -50%);\n ${isStatic?\"\":`animation: ${cls}-status-dot 2400ms ease-in-out infinite;`}\n}\n/* The outward ping. Kept inside the 12px disc: 6px scaled by 2. */\n.${cls}-agent-icon::before {\n background: currentColor;\n opacity: 0;\n transform: translate(-50%, -50%) scale(1);\n ${isStatic?\"\":`animation: ${cls}-status-ping 2400ms ease-out infinite;`}\n}\n@keyframes ${cls}-status-dot {\n 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n 50% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.7; }\n}\n@keyframes ${cls}-status-ping {\n 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }\n 70%, 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n}\n/* Block so it keeps its own line under the title pill, but only as wide as\n the text so the underline and the hit area don't span the whole column. */\n.${cls}-agent-cta {\n display: block;\n width: fit-content;\n margin: 7px 0 0 2px;\n color: rgba(255, 255, 255, 0.92);\n font-size: 12px;\n line-height: 1.2;\n letter-spacing: -0.01em;\n cursor: pointer;\n text-decoration: underline;\n text-decoration-color: rgba(255, 255, 255, 0.3);\n text-underline-offset: 3px;\n opacity: 0;\n transform: translateY(7px);\n ${isStatic?\"\":`transition: opacity ${outDuration}ms linear, transform ${outDuration}ms ${EASE};`}\n}\n.${cls}-item[data-active=\"true\"] .${cls}-agent-head {\n opacity: 1;\n transform: translateY(0);\n ${isStatic?\"\":`transition: opacity ${inDuration}ms linear ${inDelay}ms, transform ${inDuration}ms ${EASE} ${inDelay}ms;`}\n}\n.${cls}-agent-cta:hover,\n.${cls}-agent-cta:focus-visible {\n color: #ffffff;\n text-decoration-color: rgba(255, 255, 255, 0.85);\n}\n.${cls}-item[data-active=\"true\"] .${cls}-agent-cta {\n opacity: 1;\n transform: translateY(0);\n ${isStatic?\"\":`transition: opacity ${inDuration}ms linear ${inDelay+65}ms, transform ${inDuration}ms ${EASE} ${inDelay+65}ms;`}\n}\n.${cls}-desc {\n display: none;\n}\n/* Transcript viewport: fixed region, clipped, with the column pinned to its\n bottom edge so new messages rise into it and old ones dissolve at the top. */\n.${cls}-conversation {\n position: absolute;\n top: calc(var(--fsc-pad) + 64px);\n right: calc(var(--fsc-pad) - var(--fsc-convo-bleed));\n bottom: calc(var(--fsc-pad) - var(--fsc-convo-bleed));\n width: calc(min(360px, 46%) + var(--fsc-convo-bleed) * 2);\n overflow: hidden;\n z-index: 3;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);\n mask-image: linear-gradient(to bottom, transparent 0, #000 56px);\n ${isStatic?\"\":`transition: opacity ${outDuration}ms linear, visibility 0ms linear 0ms;`}\n}\n.${cls}-item[data-active=\"true\"] .${cls}-conversation {\n visibility: visible;\n opacity: 1;\n ${isStatic?\"\":`transition: opacity ${inDuration}ms linear ${inDelay+40}ms, visibility 0ms linear 0ms;`}\n}\n/* No will-change and no resting transform on purpose: either one would turn\n this stack into a backdrop root, and the glass bubbles inside would have\n nothing left to blur. The FLIP clears its own transform when it finishes. */\n.${cls}-convo-stack {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: 10px;\n /* Keeps the bubbles off the viewport's clip edge so their drop shadow is\n not sliced. The viewport grows by the same amount, so the bubbles stay\n exactly where they were on screen. No bleed is needed at the top — the\n mask already fades that edge out. */\n padding: 0 var(--fsc-convo-bleed) var(--fsc-convo-bleed);\n}\n/* The bubble entry is a keyframe animation, not a transition: a message is\n mounted only when it is due, so the animation has to fire on mount. */\n@keyframes ${cls}-pop-agent {\n from { opacity: 0.001; transform: scale(0.3) rotate(0.4deg); }\n to { opacity: 1; transform: none; }\n}\n@keyframes ${cls}-pop-customer {\n from { opacity: 0.001; transform: scale(0.3) rotate(-0.4deg); }\n to { opacity: 1; transform: none; }\n}\n/* Two clearly different materials, the way ElevenLabs separates its speakers:\n Silia is frosted glass over the photo, the customer is flat black. */\n/* Matches the ElevenLabs transcript: no speaker labels, generous padding and\n radius, the agent in flat white, the customer in glass that takes its hue\n from the photo behind it. */\n/* One corner per bubble stays square to mark where the message comes from:\n the agent squares its top-left, the customer its bottom-right.\n Shorthand order: top-left, top-right, bottom-right, bottom-left. */\n.${cls}-msg {\n max-width: 88%;\n padding: 11px 14px;\n font-size: 13px;\n line-height: 1.38;\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);\n}\n.${cls}-msg[data-speaker=\"agent\"] {\n align-self: flex-start;\n border-radius: 4px 14px 14px 14px;\n color: #0f1115;\n background: #ffffff;\n ${isStatic?\"\":`animation: ${cls}-pop-agent ${MSG_IN_MS}ms ${MSG_EASE} both;`}\n}\n/* brightness() keeps the white text legible over a bright photo, while\n saturate() lets the backdrop's own colour bleed through the glass. */\n.${cls}-msg[data-speaker=\"customer\"] {\n align-self: flex-end;\n border-radius: 14px 14px 4px 14px;\n color: #ffffff;\n background: rgba(10, 10, 12, 0.3);\n -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(0.55);\n backdrop-filter: blur(24px) saturate(160%) brightness(0.55);\n border: 1px solid rgba(255, 255, 255, 0.16);\n ${isStatic?\"\":`animation: ${cls}-pop-customer ${MSG_IN_MS}ms ${MSG_EASE} both;`}\n}\n/* A step that already played comes back whole, with no second flourish. */\n.${cls}-convo-stack[data-instant=\"true\"] .${cls}-msg {\n animation: none;\n}\n.${cls}-msg-word {\n opacity: 0;\n ${isStatic?\"opacity: 1;\":`transition: opacity ${WORD_FADE_MS}ms ${WORD_EASE};`}\n}\n.${cls}-msg-word[data-spoken=\"true\"] {\n opacity: 1;\n}\n/* The speaker is carried by side and colour, as in the reference. The name\n stays in the DOM for screen readers only. */\n.${cls}-msg-author {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n.${cls}-slice-label {\n position: absolute;\n left: 50%;\n bottom: 14px;\n transform: translateX(-50%);\n z-index: 3;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n font-size: 11px;\n font-weight: 450;\n letter-spacing: 0.02em;\n color: rgba(255, 255, 255, 0.88);\n opacity: 0.78;\n pointer-events: none;\n max-height: 72%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.${cls}-item[data-active=\"true\"] .${cls}-slice-label {\n opacity: 0;\n}\n.${cls}-arrow {\n flex: 0 0 auto;\n width: var(--fsc-arrow);\n height: var(--fsc-arrow);\n border-radius: 999px;\n border: none;\n display: grid;\n place-items: center;\n background: ${arrowBackground};\n color: ${arrowColor};\n cursor: pointer;\n padding: 0;\n}\n.${cls}[data-orient=\"vertical\"] .${cls}-track {\n flex-direction: column;\n}\n.${cls}[data-orient=\"vertical\"] .${cls}-slice-label {\n /* Stacked mode: the collapsed bars carry just the agent title in Klarheit\n Book, tucked against the right edge (per the landing mobile design). */\n writing-mode: horizontal-tb;\n left: auto;\n right: 16px;\n bottom: 50%;\n transform: translateY(50%);\n max-width: calc(100% - 32px);\n text-align: right;\n font-family: ${FONT_BODY};\n font-size: 12px;\n}\n.${cls}[data-orient=\"vertical\"] {\n --fsc-collapsed: ${collapsedSizeMobile}px;\n --fsc-collapsed-radius: ${collapsedSizeMobile/2}px;\n --fsc-pad: 20px;\n --fsc-title: ${Math.max(16,Math.round(titleSize*.78))}px;\n --fsc-desc: ${Math.max(12,Math.round(descriptionSize*.88))}px;\n --fsc-arrow: 34px;\n --fsc-text-max: 38ch;\n}\n.${cls}[data-orient=\"vertical\"] .${cls}-content {\n align-items: flex-start;\n}\n.${cls}[data-orient=\"vertical\"] .${cls}-copy {\n max-width: min(56%, 360px);\n}\n.${cls}[data-orient=\"vertical\"] .${cls}-conversation {\n width: calc(min(320px, 54%) + var(--fsc-convo-bleed) * 2);\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-track {\n flex-direction: row;\n align-items: stretch;\n height: 100%;\n transform: translate3d(calc(var(--fsc-mobile-step) * -1), 0, 0);\n ${isStatic?\"\":`transition: transform ${Math.max(260,Math.round(duration*.62))}ms ${EASE};`}\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] {\n --fsc-collapsed: ${Math.max(18,Math.round(collapsedSizeMobile*.75))}px;\n --fsc-collapsed-radius: ${Math.max(10,Math.round(collapsedSizeMobile*.75/2))}px;\n --fsc-pad: 16px;\n --fsc-title: ${Math.max(16,Math.round(titleSize*.78))}px;\n --fsc-desc: ${Math.max(12,Math.round(descriptionSize*.88))}px;\n --fsc-arrow: 34px;\n --fsc-text-max: 38ch;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-item {\n flex: 0 0 var(--fsc-mobile-card);\n border-radius: ${Math.max(16,Math.round(radius*.9))}px;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-item[data-active=\"true\"] {\n flex: 0 0 var(--fsc-mobile-card);\n border-radius: ${Math.max(16,Math.round(radius*.9))}px;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-content {\n align-items: flex-start;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-copy {\n max-width: min(70%, 320px);\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-conversation {\n width: calc(min(260px, 66%) + var(--fsc-convo-bleed) * 2);\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-convo-stack {\n gap: 6px;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-msg {\n font-size: 12px;\n padding: 9px 12px;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-msg[data-speaker=\"agent\"] {\n border-radius: 4px 12px 12px 12px;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-msg[data-speaker=\"customer\"] {\n border-radius: 12px 12px 4px 12px;\n}\n.${cls}[data-orient=\"auto\"][data-mobile=\"true\"] .${cls}-slice-label {\n writing-mode: horizontal-tb;\n left: 14px;\n bottom: 50%;\n transform: translateY(50%);\n max-width: calc(100% - 24px);\n}\n@media (max-width: ${mobileCutoff}px) {\n .${cls}[data-orient=\"auto\"] .${cls}-track {\n flex-direction: row;\n align-items: stretch;\n height: 100%;\n transform: translate3d(calc(var(--fsc-mobile-step) * -1), 0, 0);\n ${isStatic?\"\":`transition: transform ${Math.max(260,Math.round(duration*.62))}ms ${EASE};`}\n }\n .${cls}[data-orient=\"auto\"] {\n --fsc-collapsed: ${Math.max(18,Math.round(collapsedSizeMobile*.75))}px;\n --fsc-collapsed-radius: ${Math.max(10,Math.round(collapsedSizeMobile*.75/2))}px;\n --fsc-pad: 16px;\n --fsc-title: ${Math.max(16,Math.round(titleSize*.78))}px;\n --fsc-desc: ${Math.max(12,Math.round(descriptionSize*.88))}px;\n --fsc-arrow: 34px;\n --fsc-text-max: 38ch;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-item {\n flex: 0 0 var(--fsc-mobile-card);\n border-radius: ${Math.max(16,Math.round(radius*.9))}px;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-item[data-active=\"true\"] {\n flex: 0 0 var(--fsc-mobile-card);\n border-radius: ${Math.max(16,Math.round(radius*.9))}px;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-content {\n align-items: flex-start;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-copy {\n max-width: min(70%, 320px);\n }\n .${cls}[data-orient=\"auto\"] .${cls}-conversation {\n width: calc(min(260px, 66%) + var(--fsc-convo-bleed) * 2);\n }\n .${cls}[data-orient=\"auto\"] .${cls}-convo-stack {\n gap: 6px;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-msg {\n font-size: 12px;\n padding: 9px 12px;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-msg[data-speaker=\"agent\"] {\n border-radius: 4px 12px 12px 12px;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-msg[data-speaker=\"customer\"] {\n border-radius: 12px 12px 4px 12px;\n }\n .${cls}[data-orient=\"auto\"] .${cls}-slice-label {\n writing-mode: horizontal-tb;\n left: 14px;\n bottom: 50%;\n transform: translateY(50%);\n max-width: calc(100% - 24px);\n }\n}\n@media (max-width: 1100px) and (min-width: ${mobileCutoff+1}px) {\n .${cls}-track {\n gap: ${Math.max(10,Math.round(gap*.9))}px;\n }\n .${cls}-item {\n flex-basis: max(${Math.max(54,collapsedSize)}px, 8.2%);\n }\n .${cls}-copy {\n max-width: min(58%, 360px);\n }\n .${cls}-conversation {\n width: calc(min(300px, 50%) + var(--fsc-convo-bleed) * 2);\n }\n .${cls}-msg {\n font-size: 12px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .${cls}-track,\n .${cls}-item,\n .${cls}-media,\n .${cls}-video,\n .${cls}-dim,\n .${cls}-scrim,\n .${cls}-content,\n .${cls}-item[data-active=\"true\"] .${cls}-content,\n .${cls}-agent-head,\n .${cls}-agent-cta,\n .${cls}-grain,\n .${cls}-conversation,\n .${cls}-convo-stack,\n .${cls}-msg,\n .${cls}-msg-word {\n animation: none !important;\n transition-duration: 1ms !important;\n transition-delay: 0ms !important;\n }\n /* The JS driver also skips playback under reduced motion, but if the\n preference flips mid-session the bubbles must still be legible. */\n .${cls}-msg {\n opacity: 1 !important;\n transform: none !important;\n }\n .${cls}-msg-word {\n opacity: 1 !important;\n }\n /* The status light stops pulsing but stays lit. */\n .${cls}-agent-icon::before,\n .${cls}-agent-icon::after {\n animation: none !important;\n }\n .${cls}-agent-icon::after {\n transform: translate(-50%, -50%) !important;\n opacity: 1 !important;\n }\n .${cls}-agent-icon::before {\n opacity: 0 !important;\n }\n}\n`;const allowHover=trigger===\"hover\"||trigger===\"both\";const allowClick=trigger===\"click\"||trigger===\"both\";const mobilePeek=34;const onPointerDown=React.useCallback(event=>{if(!isMobileSlider||total<2)return;if(event.pointerType===\"mouse\"&&event.button!==0)return;swipeStartX.current=event.clientX;swipePointerId.current=event.pointerId;event.currentTarget.setPointerCapture(event.pointerId);},[isMobileSlider,total]);const onPointerUp=React.useCallback(event=>{if(!isMobileSlider||total<2)return;if(swipePointerId.current!==event.pointerId)return;const start=swipeStartX.current;swipeStartX.current=null;swipePointerId.current=null;if(start===null)return;const deltaX=event.clientX-start;const threshold=36;if(deltaX<=-threshold){goNext();}else if(deltaX>=threshold){goPrev();}},[goNext,goPrev,isMobileSlider,total]);return /*#__PURE__*/_jsxs(\"div\",{ref:rootRef,className:cls,\"data-compat\":compatNoop?\"true\":\"false\",\"data-orient\":orientation,\"data-mobile\":isMobileSlider?\"true\":\"false\",style:{position:\"relative\",width:rootWidth,height:rootHeight,maxWidth:\"100%\",overflow:\"hidden\",touchAction:isMobileSlider?\"pan-y\":\"auto\",...style,fontFamily:FONT_BODY},children:[/*#__PURE__*/_jsx(\"style\",{children:css}),/*#__PURE__*/_jsx(\"div\",{className:`${cls}-track`,role:\"tablist\",\"aria-label\":\"Steps\",\"aria-orientation\":orientation===\"vertical\"?\"vertical\":\"horizontal\",onPointerDown:onPointerDown,onPointerUp:onPointerUp,onPointerCancel:()=>{swipeStartX.current=null;swipePointerId.current=null;},style:isMobileSlider?{[\"--fsc-mobile-peek\"]:`${mobilePeek}px`,[\"--fsc-mobile-step\"]:`calc((100% - ${mobilePeek}px + ${gap}px) * ${safeIndex})`}:undefined,children:normalizedSteps.map((step,index)=>{const isActive=index===safeIndex;// Only the active step renders bubbles, and only as many as\n// playback has reached. Inactive steps render none — the\n// collapsed slice has no room for them anyway.\nconst conversationWords=isActive?reveal:[];const conversationItems=isActive?(isMobileSlider?step.conversation.slice(0,3):step.conversation).slice(0,conversationWords.length):[];const conversationInstant=isStatic||prefersReducedMotion||playedRef.current.has(index);return /*#__PURE__*/_jsxs(\"button\",{type:\"button\",role:\"tab\",\"aria-selected\":isActive,\"aria-label\":`Seleccionar ${step.title}`,className:`${cls}-item`,\"data-active\":isActive?\"true\":\"false\",onClick:allowClick&&!isActive?()=>focusTo(index):undefined,onMouseEnter:allowHover&&!isStatic?()=>focusTo(index):undefined,onFocus:allowHover&&!isStatic?()=>focusTo(index):undefined,children:[(step.poster||step.image?.src)&&/*#__PURE__*/_jsx(\"img\",{className:`${cls}-media`,src:step.poster||step.image?.src,srcSet:step.poster?undefined:step.image?.srcSet,alt:step.image.alt||\"\",loading:index===0?\"eager\":\"lazy\",decoding:\"async\"}),isActive&&activeVideos.map((src,videoIndex)=>/*#__PURE__*/_jsx(\"video\",{ref:node=>{videoRefs.current[videoIndex]=node;},className:`${cls}-video`,\"data-on\":videoIndex===videoTurn%activeVideos.length?\"true\":\"false\",src:src,poster:step.poster||step.image?.src,muted:true,playsInline:true,preload:\"auto\",\"aria-hidden\":\"true\",onEnded:videoIndex===videoTurn%activeVideos.length?advanceVideo:undefined},src)),/*#__PURE__*/_jsx(\"div\",{className:`${cls}-dim`}),/*#__PURE__*/_jsx(\"div\",{className:`${cls}-scrim`}),/*#__PURE__*/_jsx(\"div\",{className:`${cls}-grain`,\"aria-hidden\":\"true\"}),!isActive&&sliceLabels&&/*#__PURE__*/_jsx(\"div\",{className:`${cls}-slice-label`,children:step.title}),/*#__PURE__*/_jsx(\"div\",{className:`${cls}-content`,children:/*#__PURE__*/_jsxs(\"div\",{className:`${cls}-copy`,children:[/*#__PURE__*/_jsxs(\"div\",{className:`${cls}-agent-head`,children:[/*#__PURE__*/_jsx(\"span\",{className:`${cls}-agent-icon`,\"aria-hidden\":\"true\"}),/*#__PURE__*/_jsx(\"div\",{className:`${cls}-title`,style:{fontFamily:FONT_TITLE},children:step.title})]}),cardCTA.trim().length>0&&(typeof step.link===\"string\"&&step.link.trim().length>0?/*#__PURE__*/_jsx(\"a\",{className:`${cls}-agent-cta`,href:step.link,tabIndex:isActive?0:-1,onClick:event=>event.stopPropagation(),children:cardCTA}):/*#__PURE__*/_jsx(\"span\",{className:`${cls}-agent-cta`,role:\"button\",tabIndex:isActive?0:-1,onClick:openLeadModal,onKeyDown:event=>{if(event.key===\"Enter\"||event.key===\" \"){event.preventDefault();openLeadModal(event);}},children:cardCTA}))]})}),conversationItems.length>0&&/*#__PURE__*/_jsx(\"div\",{className:`${cls}-conversation`,\"aria-hidden\":!isActive,children:/*#__PURE__*/_jsx(\"div\",{className:`${cls}-convo-stack`,\"data-instant\":conversationInstant?\"true\":\"false\",ref:isActive?stackRef:undefined,children:conversationItems.map((message,messageIndex)=>/*#__PURE__*/_jsxs(\"div\",{className:`${cls}-msg`,\"data-speaker\":message.speaker,style:{fontFamily:FONT_BODY},children:[/*#__PURE__*/_jsxs(\"span\",{className:`${cls}-msg-author`,children:[message.label,\":\"]}),message.words.map((word,wordIndex)=>/*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsx(\"span\",{className:`${cls}-msg-word`,\"data-spoken\":wordIndex<(conversationWords[messageIndex]??0)?\"true\":\"false\",children:word}),wordIndex