/* ═══════════════════════════════════════════════════════════════════
   PTS AI · la consola de la demo de voz (/try y las landings por industria)
   Todo vive bajo .vd y trae sus propios colores, así no choca con el CSS
   de cada página. La arma assets/voice-demo.js.
   ═══════════════════════════════════════════════════════════════════ */
.vd{--vd-navy:#10202e;--vd-ink:#f4f1ea;--vd-ink2:#e4e0d6;--vd-dim:#a3acb4;--vd-dim2:#8a939b;--vd-gold:#e08a2e;--vd-gold-l:#eba45a;--vd-on-gold:#10202e;
  --vd-green:#4bd48a;--vd-red:#e56a60;--vd-blue:#8fb3cc;--vd-line:rgba(255,255,255,.08);--vd-line2:rgba(255,255,255,.16);
  --vd-serif:'Fraunces',Georgia,serif;--vd-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--vd-ease:cubic-bezier(.22,1,.36,1);
  position:relative;border:1px solid var(--vd-line2);border-radius:32px;background:#172d40;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(224,138,46,.06) inset;overflow:hidden;color:var(--vd-ink);font-family:var(--vd-sans);line-height:1.6;text-align:left}
.vd *,.vd *::before,.vd *::after{box-sizing:border-box}
.vd button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.vd-tabs{display:flex;gap:6px;padding:14px 14px 0;overflow-x:auto;scrollbar-width:none}
.vd-tabs::-webkit-scrollbar{display:none}
.vd-tab{flex:none;display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:14px 14px 0 0;font-size:14px;font-weight:700;color:var(--vd-dim);border:1px solid transparent;border-bottom:0;transition:color .2s,background .2s}
.vd-tab:hover{color:#fff}
.vd-tab[aria-selected="true"]{color:#fff;background:rgba(16,32,46,.55);border-color:var(--vd-line)}
.vd-tab .ic{font-size:16px;line-height:1}
.vd-body{display:grid;grid-template-columns:300px 1fr 320px;background:rgba(16,32,46,.55);min-height:560px}
.vd-tabs + .vd-body{border-top:1px solid var(--vd-line)}
@media (max-width:1100px){.vd-body{grid-template-columns:1fr 1fr}.vd-stage{grid-column:1/-1;order:-1;border-bottom:1px solid var(--vd-line)}.vd-setup{border-right:1px solid var(--vd-line)}}
@media (max-width:720px){.vd-body{grid-template-columns:1fr}.vd-setup{border-right:0!important;border-bottom:1px solid var(--vd-line)}.vd{border-radius:26px}}

.vd-setup{padding:26px 24px;border-right:1px solid var(--vd-line);display:flex;flex-direction:column;gap:20px}
.vd-k{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--vd-dim2);margin:0 0 8px}
.vd-field input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--vd-line2);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:15px;margin:0}
.vd-field input:focus{outline:none;border-color:var(--vd-gold)}
.vd-seg{display:inline-flex;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--vd-line)}
.vd-seg button{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--vd-dim)}
.vd-seg button[aria-pressed="true"]{background:var(--vd-gold);color:var(--vd-on-gold)}
.vd-role{padding:18px;border-radius:16px;background:rgba(224,138,46,.07);border:1px solid rgba(224,138,46,.25)}
.vd-role b{display:block;font-size:13px;color:var(--vd-gold-l);margin-bottom:6px}
.vd-role p{font-size:14.5px;color:var(--vd-ink2);line-height:1.5;margin:0}
.vd-role .who{margin-top:12px;padding-top:12px;border-top:1px solid rgba(224,138,46,.2);font-size:13px;color:var(--vd-dim)}
.vd-role .who strong{color:#fff}

.vd-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px 24px 26px;text-align:center}
.vd-agent{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--vd-dim)}
.vd-agent b{color:#fff;font-weight:700}
.vd-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--vd-dim2);transition:background .3s}
.vd.live .vd-dot{background:var(--vd-green);box-shadow:0 0 0 4px rgba(75,212,138,.16)}
.vd-orb{position:relative;width:min(300px,72vw);aspect-ratio:1;margin:18px 0 6px}
.vd-orb canvas{position:absolute;inset:0;width:100%;height:100%}
.vd-call{position:absolute;inset:22%;border-radius:50%;display:grid;place-items:center;background:#172d40!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 20px 50px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .3s var(--vd-ease)}
.vd-call:hover{transform:scale(1.03)}
.vd-call svg{width:34%;height:34%;color:var(--vd-gold-l)}
.vd-call .ic-stop{display:none}
.vd.live .vd-call .ic-call{display:none}.vd.live .vd-call .ic-stop{display:block;color:#fff}
.vd-status{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vd-gold);min-height:20px}
.vd-timer{font-variant-numeric:tabular-nums;color:var(--vd-dim2);margin-left:8px;font-weight:600;letter-spacing:.04em}
.vd-tap{margin:6px 0 0;font-size:14.5px;font-weight:600;color:var(--vd-ink2);min-height:0}
.vd-tap:empty{display:none}
.vd-mic{display:none;align-items:center;gap:9px;margin-top:10px;padding:8px 16px;border-radius:100px;background:rgba(143,179,204,.14);border:1px solid rgba(143,179,204,.45);color:#cfe0fa;font-size:13.5px;font-weight:700}
.vd-mic i{width:9px;height:9px;border-radius:50%;background:var(--vd-blue);animation:vdpulse 1.2s infinite}
@keyframes vdpulse{50%{box-shadow:0 0 0 7px rgba(143,179,204,0)}0%{box-shadow:0 0 0 0 rgba(143,179,204,.6)}}
.vd.hearing .vd-mic{display:inline-flex}
.vd-switch-old{margin-top:16px;font-size:13.5px!important;font-weight:600;color:var(--vd-dim)!important;text-decoration:underline;text-underline-offset:3px;padding:4px 8px}
.vd-switch:hover{color:#fff!important}
.vd-nosr{display:none;margin:12px 0 0;font-size:13px;color:var(--vd-gold-l);max-width:460px}
.vd.no-sr .vd-nosr{display:block}
.vd-caps{width:100%;max-width:560px;min-height:118px;margin-top:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.vd-cap{font-size:17px;line-height:1.5;color:var(--vd-ink2);opacity:.45;transition:opacity .3s;margin:0}
.vd-cap:last-child{opacity:1;color:#fff}
.vd-cap .who{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vd-gold);margin-bottom:2px}
.vd-cap.me .who{color:var(--vd-blue)}
.vd-cap.interim{opacity:.6;font-style:italic}
.vd-hint{font-size:14px;color:var(--vd-dim);margin:0}
.vd-say{display:none;width:100%;max-width:560px;margin-top:16px;gap:8px}
.vd.mode-chat .vd-say{display:flex}
.vd-say input{flex:1;min-width:0;padding:13px 16px;border-radius:100px;border:1px solid var(--vd-line2);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:15px;margin:0}
.vd-say input:focus{outline:none;border-color:var(--vd-gold)}
.vd-say button{width:46px;height:46px;flex:none;border-radius:50%;background:var(--vd-gold)!important;color:var(--vd-on-gold);display:grid;place-items:center}
.vd-say button svg{width:18px;height:18px}
.vd-sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:600px}
.vd-sugg button{padding:7px 12px;border-radius:100px;background:rgba(143,179,204,.1)!important;border:1px solid rgba(143,179,204,.3)!important;color:#cfe0fa;font-size:13px;font-weight:600;line-height:1.4}
.vd-sugg button:hover{background:rgba(143,179,204,.2)!important}
.vd-note{margin:14px 0 0;font-size:12.5px;color:var(--vd-dim2);max-width:520px}
.vd-err{margin-top:14px;padding:12px 16px;border-radius:12px;background:rgba(229,106,96,.1);border:1px solid rgba(229,106,96,.35);color:#f6c4bf;font-size:14px;max-width:520px;display:none}
.vd-err a{color:#fff}

.vd-crm{padding:26px 22px;border-left:1px solid var(--vd-line);display:flex;flex-direction:column}
@media (max-width:1100px){.vd-crm{border-left:0}}
.vd-crm h3{font-family:var(--vd-serif);font-size:22px;font-weight:700;color:#fff;margin:6px 0 4px;letter-spacing:-.01em;line-height:1.2}
.vd-crm .sub{font-size:13.5px;color:var(--vd-dim);margin:0 0 16px}
.vd-log{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;margin:0;padding:0}
.vd-log .empty{font-size:14px;color:var(--vd-dim2);padding:16px;border:1px dashed var(--vd-line2);border-radius:14px;line-height:1.5}
.vd-ev{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--vd-line);animation:vdin .5s var(--vd-ease) both}
@keyframes vdin{from{opacity:0;transform:translateY(8px)}}
.vd-ev i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:16px;background:rgba(224,138,46,.13)}
.vd-ev b{display:block;font-size:14px;color:#fff}
.vd-ev span{display:block;font-size:13px;color:var(--vd-dim);margin-top:2px}
.vd-ev time{font-size:12px;color:var(--vd-dim2);font-variant-numeric:tabular-nums}
.vd-ev.booked i,.vd-ev.review i{background:rgba(75,212,138,.14)}.vd-ev.transfer i{background:rgba(143,179,204,.16)}.vd-ev.optout i{background:rgba(229,106,96,.14)}
.vd-crm-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--vd-line);font-size:13px;color:var(--vd-dim)}
.vd-crm-foot a{color:var(--vd-gold-l);font-weight:700;text-decoration:none}

.vd-after{display:none;margin-top:18px;padding:18px 20px;border-radius:18px;background:rgba(224,138,46,.16);border:1px solid rgba(224,138,46,.4);max-width:560px;text-align:left}
.vd-after.on{display:block;animation:vdin .6s var(--vd-ease) both}
.vd-after b{display:block;font-family:var(--vd-serif);font-size:21px;color:#fff;margin-bottom:6px;line-height:1.25}
.vd-after p{font-size:14.5px;color:var(--vd-ink2);margin:0 0 14px}
.vd-after .row{display:flex;gap:10px;flex-wrap:wrap}
.vd-after .go{display:inline-flex;align-items:center;gap:10px;background:var(--vd-gold);color:var(--vd-on-gold);font-weight:800;font-size:15px;text-decoration:none;padding:13px 22px;border-radius:100px}
.vd-after .go:hover{background:var(--vd-gold-l)}
.vd-after .again{padding:13px 20px;border-radius:100px;border:1px solid var(--vd-line2)!important;font-weight:700;font-size:14.5px}
.vd .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.vd *{animation:none!important;transition:none!important}}

/* los otros canales: el mismo asistente también escribe */
.vd-ch{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:18px 24px;border-top:1px solid var(--vd-line);background:rgba(16,32,46,.7)}
.vd-ch b{font-family:var(--vd-serif);font-size:18px;color:#fff}
.vd-ch-s{font-size:13.5px;color:var(--vd-dim);flex:1 1 280px}
.vd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.vd-chips li{padding:6px 12px;border-radius:100px;border:1px solid var(--vd-line2);font-size:12.5px;font-weight:700;color:var(--vd-ink2);background:rgba(255,255,255,.03)}
.vd-chips li.more{border-style:dashed;color:var(--vd-gold-l)}

/* la llamada entrante: el botón vibra mientras nadie contesta */
.vd:not(.live):not(.ended) .vd-call{animation:vdring 1.6s ease-in-out infinite}
@keyframes vdring{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-7deg)}70%{transform:rotate(7deg)}74%{transform:rotate(-5deg)}78%{transform:rotate(5deg)}82%{transform:rotate(0)}}
.vd:not(.live) .vd-call:hover{animation-play-state:paused}

/* Llamada / Mensajes: las dos funciones, arriba del escenario */
.vd-mode{margin-bottom:16px}
.vd-mode button{padding:8px 18px;font-size:14px}
/* los canales, con su logo (Simple Icons, CC0) en el tono de la marca */
.vd-chips li{display:inline-flex;align-items:center;gap:7px}
.vd-chips img{width:15px;height:15px;filter:brightness(0) invert(.93);opacity:.9}

/* ── modo Text: el mismo diseño que la escena de la industria (una sola forma de mostrar una conversación) ── */
.vd-thread{display:none}
.vd.mode-chat .vd-thread{display:none;flex-direction:column;width:100%;max-width:440px;margin-top:16px;padding:22px 22px 20px;border-radius:28px;background:#172d40;border:1px solid var(--vd-line2);box-shadow:0 50px 100px -40px rgba(0,0,0,.8);text-align:left}
.vd-thread-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--vd-line)}
.vd-av{flex:none;width:40px;height:40px;border-radius:12px;background:var(--vd-gold);color:var(--vd-on-gold);display:grid;place-items:center;font-weight:800;font-size:15px}
.vd-thread-top b{display:block;font-size:14.5px;color:#fff}
.vd-thread-top small{display:block;font-size:12px;color:var(--vd-dim)}
.vd-bubbles{display:flex;flex-direction:column;gap:10px;padding-top:16px;height:320px;overflow-y:auto;scroll-behavior:smooth}
.vd-b{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.45;animation:vdIn .3s ease-out}
.vd-b .who{display:block;font-family:var(--pts-mono,ui-monospace,monospace);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--vd-dim);margin-bottom:3px}
.vd-b.ai{align-self:flex-start;background:#1c3549;border:1px solid var(--vd-line);border-bottom-left-radius:5px;color:var(--vd-ink2)}
.vd-b.me{align-self:flex-end;background:rgba(224,138,46,.14);border:1px solid rgba(224,138,46,.3);border-bottom-right-radius:5px;color:#fff}
.vd-b.me .who{color:var(--vd-gold-l)}
.vd-b .tx:empty::after{content:'…'}
@keyframes vdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vd-typing{display:none;align-self:flex-start;gap:4px;margin-top:10px;padding:12px 14px;border-radius:16px;border-bottom-left-radius:5px;background:#1c3549;border:1px solid var(--vd-line)}
.vd.mode-chat.thinking .vd-typing{display:flex}
.vd-typing i{width:7px;height:7px;border-radius:50%;background:var(--vd-dim);animation:vdDot 1.2s infinite}
.vd-typing i:nth-child(2){animation-delay:.15s}.vd-typing i:nth-child(3){animation-delay:.3s}
@keyframes vdDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:560px){.vd.mode-chat .vd-thread{padding:18px 16px}}
@media (prefers-reduced-motion:reduce){.vd-b,.vd-typing i{animation:none}}
/* Text: los estados del ejemplo y el número para recibir el SMS de verdad */
.vd-sc-st{padding:11px 14px;border-radius:14px;font-size:13.5px;font-weight:700;animation:vdIn .3s ease-out}
.vd-sc-st.ok{background:rgba(75,212,138,.1);border:1px solid rgba(75,212,138,.35);color:var(--vd-green)}
.vd-sc-st.go{background:rgba(224,138,46,.12);border:1px solid rgba(224,138,46,.4);color:var(--vd-gold-l)}
.vd-sms{margin-top:14px;padding-top:14px;border-top:1px solid var(--vd-line)}
.vd.live .vd-sms,.vd.live .vd-sms-ok{display:none!important}
.vd-sms-h{margin:0 0 10px;font-size:15px;font-weight:700;color:#fff}
.vd-sms .row{display:flex;gap:8px}
.vd-sms input{flex:1;min-width:0;padding:12px 15px;border-radius:100px;border:1px solid var(--vd-line2);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:15px;margin:0}
.vd-sms input:focus{outline:none;border-color:var(--vd-gold)}
.vd-sms button{flex:none;padding:12px 20px;border-radius:100px;background:var(--vd-gold)!important;color:var(--vd-on-gold);font-weight:800;font-size:15px}
.vd-sms button:disabled{opacity:.6}
.vd-sms-c{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--vd-dim2)}
.vd-sms-c a{color:var(--vd-dim)}
.vd-sms-ok:not(:empty){margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(75,212,138,.1);border:1px solid rgba(75,212,138,.35);color:var(--vd-green);font-weight:700;font-size:14px}

/* ── panel visual: menos texto, más señales ── */
.vd-mode{display:none}
.vd-setup{gap:16px}
.vd-me{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:rgba(224,138,46,.08);border:1px solid rgba(224,138,46,.28)}
.vd-me-av{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:rgba(224,138,46,.18)}
.vd-me .vd-k{margin:0 0 3px;color:var(--vd-gold-l)}
.vd-me-who{display:block;font-size:14px;line-height:1.4;color:#fff;font-weight:600}
.vd-calling{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--vd-line)}
.vd-ring{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(75,212,138,.15);font-size:17px;animation:vdRing 1.4s ease-in-out infinite}
.vd-ring::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(75,212,138,.5);animation:vdPulse 1.4s ease-out infinite}
@keyframes vdRing{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}
@keyframes vdPulse{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}
.vd.live .vd-ring{animation:none;background:rgba(224,138,46,.18)}.vd.live .vd-ring::after{display:none}
.vd-calling-t{font-size:14px;font-weight:700;color:#fff}
.vd-pill{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 14px;border-radius:100px;border:1px solid var(--vd-line2);background:rgba(255,255,255,.04)}
.vd-pill:focus-within{border-color:var(--vd-gold)}
.vd-pill input{flex:1;min-width:0;padding:10px 6px;border:0;background:none;color:#fff;font:inherit;font-size:15px;margin:0}
.vd-pill input:focus{outline:none}
.vd-flags{align-self:flex-start}
.vd-flags button{font-size:14px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vd-steps{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto}
.vd-steps span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px}
.vd-steps i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-size:21px;background:rgba(255,255,255,.05);border:1px solid var(--vd-line2);animation:vdStep 3.6s ease-in-out infinite}
.vd-steps span:nth-of-type(2) i{animation-delay:1.2s}.vd-steps span:nth-of-type(3) i{animation-delay:2.4s}
@keyframes vdStep{0%,30%,100%{border-color:var(--vd-line2);transform:none}10%{border-color:var(--vd-gold);transform:translateY(-3px)}}
.vd-steps b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--vd-dim)}
.vd-steps em{font-style:normal;color:var(--vd-dim2);margin-bottom:20px}
.vd-live{display:flex;align-items:center;gap:7px}
.vd-live i{width:8px;height:8px;border-radius:50%;background:var(--vd-green);animation:vdPulse 1.6s ease-out infinite;box-shadow:0 0 0 0 var(--vd-green)}
.vd-log{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.vd-ev{grid-column:1/-1}
.vd-ghost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 8px;border-radius:16px;border:1px dashed var(--vd-line2);background:rgba(255,255,255,.02)}
.vd-ghost i{font-style:normal;font-size:24px;filter:grayscale(1);opacity:.55}
.vd-ghost b{font-size:12px;font-weight:700;color:var(--vd-dim2)}
.vd-log.waiting .vd-ghost{animation:vdGhost 2.4s ease-in-out infinite}
.vd-log.waiting .vd-ghost:nth-child(2){animation-delay:.6s}.vd-log.waiting .vd-ghost:nth-child(3){animation-delay:1.2s}.vd-log.waiting .vd-ghost:nth-child(4){animation-delay:1.8s}
@keyframes vdGhost{0%,100%{border-color:var(--vd-line2)}50%{border-color:rgba(224,138,46,.55)}}
.vd-crm h3{margin-bottom:14px}
.vd-crm-foot{border-top:0;padding-top:0}
.vd-note{font-size:12px}
@media (prefers-reduced-motion:reduce){.vd-ring,.vd-ring::after,.vd-steps i,.vd-live i,.vd-log.waiting .vd-ghost{animation:none}}

/* el número dentro de la tarjeta de ejemplo (assets/scene-sms.js) */
.sc-sms{padding:14px;border-radius:16px;background:rgba(224,138,46,.08);border:1px solid rgba(224,138,46,.35);text-align:left}
.sc-sms-h{margin:0 0 10px;font-size:14.5px;font-weight:800;color:#fff}
.sc-sms .row{display:flex;gap:8px}
.sc-sms input{flex:1;min-width:0;padding:11px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:15px;margin:0}
.sc-sms input:focus{outline:none;border-color:#e08a2e}
.sc-sms button{flex:none;padding:11px 18px;border-radius:100px;border:0;background:#e08a2e;color:#10202e;font:inherit;font-weight:800;font-size:14.5px;cursor:pointer}
.sc-sms button:disabled{opacity:.6}
.sc-sms-c{margin:8px 0 0;font-size:11px;line-height:1.45;color:#8a939b}
.sc-sms-c a{color:#a3acb4}
.sc-sms-ok:empty{display:none}
.sc-sms-ok{margin:10px 0 0;font-size:14px;font-weight:700;color:#4bd48a}
.sc-sms-ok.bad{color:#e56a60}

/* ══ UNA SOLA PIEZA: el teléfono con el ejemplo y la llamada en vivo ══ */
.vd-stage{padding:34px 24px 22px}
.vd-phone{position:relative;width:100%;max-width:460px;padding:20px 20px 18px;border-radius:30px;background:#172d40;border:1px solid var(--vd-line2);box-shadow:0 50px 100px -40px rgba(0,0,0,.8);text-align:left}
.vd-phone .seal{position:absolute;width:96px;height:96px;right:-14px;top:-30px;z-index:3}
@media (max-width:560px){.vd-phone .seal{width:74px;height:74px;right:-6px;top:-26px}}
.vd-phone .seal svg{width:100%;height:100%;animation:vdSeal 22s linear infinite}
.vd-phone .seal text{font-size:11px;font-weight:800;letter-spacing:2.4px;fill:#10202e;text-transform:uppercase;font-family:var(--pts-sans,inherit)}
.vd-phone .seal .core{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vd-phone .seal .core span{width:48px;height:48px;border-radius:50%;background:#10202e;display:grid;place-items:center;color:var(--vd-gold);font-family:var(--vd-serif,Georgia,serif);font-size:20px;font-weight:700;font-style:italic}
@keyframes vdSeal{to{transform:rotate(360deg)}}
.vd-ptop{display:flex;align-items:center;gap:12px;padding:0 60px 14px 0;border-bottom:1px solid var(--vd-line)}
.vd-ptop .vd-av{flex:none;width:42px;height:42px;border-radius:12px;background:var(--vd-gold);color:var(--vd-on-gold);display:grid;place-items:center;font-weight:800;font-size:15px}
.vd-ptop b{display:block;font-size:15px;color:#fff}
.vd-ptop small{display:block;font-size:12.5px;color:var(--vd-dim)}
.vd-views{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:14px 0 4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--vd-line)}
.vd-views button{padding:12px 10px;border-radius:12px;font-size:16px;font-weight:800;color:var(--vd-dim);background:none!important;border:0!important;cursor:pointer}
.vd-views button[aria-pressed="true"]{background:var(--vd-gold)!important;color:var(--vd-on-gold)}
.vd-feed{display:flex;flex-direction:column;gap:9px;height:330px;overflow-y:auto;padding:14px 2px 6px;scroll-behavior:smooth;contain:content}
.vd-feed .vd-b{max-width:86%}
.vd-feed .vd-b.interim{opacity:.6;font-style:italic}
.vd-typing{display:none}
.vd.live.thinking .vd-typing{display:flex}
.vd-callbar{display:flex;align-items:center;gap:14px;margin-top:10px;padding:12px 14px;border-radius:20px;background:rgba(75,212,138,.08);border:1px solid rgba(75,212,138,.35);cursor:pointer}
.vd.live .vd-callbar{background:rgba(224,138,46,.08);border-color:rgba(224,138,46,.4)}
.vd-callbar .vd-orb{flex:none;width:88px;margin:0}
.vd-callbar .vd-call{inset:20%}
.vd:not(.live) .vd-callbar .vd-call{background:#1f8f55!important;animation:vdRing 1.4s ease-in-out infinite}
.vd:not(.live) .vd-callbar .vd-call svg{color:#fff}
.vd-cbt{display:flex;flex-direction:column;gap:4px;min-width:0}
.vd-cbt .vd-tap{display:block;margin:0;font-size:18px;font-weight:800;color:#fff}
.vd-cbt .vd-status{font-size:11.5px;min-height:0}
.vd.view-text .vd-callbar,.vd.view-text .vd-say,.vd.view-text .vd-sugg{display:none}
.vd-smsf{display:none;margin-top:10px}
.vd.view-text .vd-smsf{display:block}
.vd:not(.live) .vd-sugg{display:none}
.vd-sugg{margin:12px auto 0;justify-content:center}
.vd-phone .vd-err,.vd-phone .vd-after{max-width:none}
.vd-stage > .vd-note{text-align:center}
/* casillas que se encienden */
.vd-ghost{transition:all .4s var(--vd-ease,ease)}
.vd-ghost small{font-size:11px;line-height:1.3;color:var(--vd-ink2);text-align:center;min-height:0}
.vd-ghost small:empty{display:none}
.vd-ghost.on{border-style:solid;border-color:rgba(75,212,138,.55);background:rgba(75,212,138,.1);transform:scale(1.03)}
.vd-ghost.on i{filter:none;opacity:1}
.vd-ghost.on b{color:var(--vd-green)}
.vd-mw{margin-top:18px;padding:16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--vd-line)}
.vd-mw .vd-k{margin:0 0 6px;color:var(--vd-gold)}
.vd-mw-d{margin:0 0 8px;font-family:var(--vd-serif,Georgia,serif);font-size:18px;line-height:1.25;color:#fff}
.vd-mw b{font-size:13.5px;color:var(--vd-gold-l)}
@media (max-width:560px){.vd-phone{padding:16px 14px}.vd-phone .seal{width:84px;height:84px;right:-8px;top:-34px}.vd-ptop{padding-right:56px}.vd-feed{height:300px}}
@media (prefers-reduced-motion:reduce){.vd-phone .seal svg,.vd:not(.live) .vd-callbar .vd-call{animation:none}}
.vd:not(.live) .vd-cbt .vd-status{display:none}

/* canales: una sola vez cada uno, todos del mismo tamaño, se acomodan solos (sin carrusel que los repite) */
body .vd-ch{display:block;padding:20px 24px 22px}
body .vd-ch>b{display:block;margin:0 0 12px}
body .vd-chips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:auto}
body .vd-chips li{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .vd-chips img{width:16px;height:16px;flex:none}
@media (max-width:860px){body .vd-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){body .vd-ch{padding:16px}body .vd-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── demo más liviana: menos recuadros dentro del recuadro ── */
body .vd-me{padding:0;background:none;border:0}
body .vd-ghost{border:0;background:rgba(255,255,255,.025)}
body .vd-ghost.on{border:0;background:rgba(75,212,138,.1);transform:none}
body .vd-mw{padding:16px 0 0;background:none;border:0;border-top:1px solid var(--vd-line);border-radius:0}
body .vd-ch{display:none}

/* ── velocidad: el lugar de la consola antes de montarla (voice-demo.js la arma al acercarse) ── */
:where([data-voice-demo]):not(.vd){min-height:722px;border-radius:32px;background:#172d40}
@media (max-width:1100px){:where([data-voice-demo]):not(.vd){min-height:1180px}}
@media (max-width:720px){:where([data-voice-demo]):not(.vd){min-height:1415px;border-radius:26px}}
@media (max-width:560px){:where([data-voice-demo]):not(.vd){min-height:1440px;border-radius:26px}}
/* fuera de pantalla las animaciones de la consola se detienen (vd-on lo pone el IntersectionObserver) */
.vd:not(.vd-on) *,.vd:not(.vd-on) *::before,.vd:not(.vd-on) *::after{animation-play-state:paused!important}
/* iOS: con menos de 16px el navegador hace zoom al escribir */
@media (max-width:760px){.vd-field input,.vd-say input,.vd-sms input,.vd-pill input,.sc-sms input{font-size:16px}}
/* teléfonos chicos (320 a 400px): el teléfono de la demo sin desbordar */
@media (max-width:400px){.vd-stage{padding:26px 10px 18px}.vd-phone .seal{width:66px;height:66px;right:-6px;top:-28px}.vd-ptop{padding-right:44px}.vd-callbar{gap:10px;padding:10px 12px}.vd-callbar .vd-orb{width:60px}}
/* las columnas no se estiran por contenido ancho (320px: la consola se salía 11px de su caja) */
.vd-body{grid-template-columns:300px minmax(0,1fr) 320px}
@media (max-width:1100px){.vd-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:720px){.vd-body{grid-template-columns:minmax(0,1fr)}}