.svc-viz{
  --v-ink: rgba(76,111,255,.55);
  --v-soft: rgba(76,111,255,.16);
  --v-bg: linear-gradient(180deg, #F6F8FF, #EEF1FF);
  --v-line: rgba(76,111,255,.20);
  --v-text: #1E2447;
  position:relative; z-index:1; height:104px; margin-bottom:22px;
  border-radius:14px; overflow:hidden;
  background:var(--v-bg); border:1px solid var(--v-line);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 24px -18px rgba(76,111,255,.55);
  font-family:'Figtree', system-ui, sans-serif; color:var(--v-text);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
html[data-theme="dark"] .svc-viz{
  --v-ink: rgba(140,160,255,.7);
  --v-soft: rgba(124,140,255,.18);
  --v-bg: linear-gradient(180deg, #181a28, #12131c);
  --v-line: rgba(255,255,255,.09);
  --v-text: #E8EAF6;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 24px -18px rgba(0,0,0,.8);
}
.svc-card:hover .svc-viz{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 30px -18px rgba(76,111,255,.7); }
.svc-viz *{ animation-play-state:paused; }
.svc-viz.is-live *{ animation-play-state:running; }

.vw-bar{ display:flex; align-items:center; gap:4px; height:18px; padding:0 9px; border-bottom:1px solid var(--v-line); }
.vw-bar i{ width:6px; height:6px; border-radius:50%; background:var(--v-soft); }
.vw-bar i:nth-child(1){ background:#FF8A80; } .vw-bar i:nth-child(2){ background:#FFD166; } .vw-bar i:nth-child(3){ background:#7BD88F; }
.vw-url{ flex:1; height:7px; margin-left:8px; border-radius:4px; background:var(--v-soft); }
.vw-page{ padding:9px 12px; }
.vw-nav{ display:flex; align-items:center; gap:6px; margin-bottom:10px; animation:vwIn 5s ease infinite; }
.vw-nav b{ width:16px; height:6px; border-radius:3px; background:var(--v-ink); margin-right:auto; }
.vw-nav span{ width:14px; height:4px; border-radius:2px; background:var(--v-soft); }
.vw-hero{ display:flex; gap:12px; align-items:center; }
.vw-copy{ flex:1; display:flex; flex-direction:column; gap:5px; }
.vw-copy i{ display:block; height:6px; border-radius:3px; background:var(--v-ink); transform-origin:0 50%; animation:vwLine 5s cubic-bezier(.2,.7,.2,1) infinite; }
.vw-copy .l1{ width:90%; height:8px; }
.vw-copy .l2{ width:70%; background:var(--v-soft); animation-delay:.25s; }
.vw-copy .l3{ width:55%; background:var(--v-soft); animation-delay:.45s; }
.vw-btn{ display:block; width:38px; height:11px; margin-top:3px; border-radius:6px; background:linear-gradient(90deg,#4C6FFF,#7C5CFF); animation:vwPop 5s cubic-bezier(.3,1.6,.5,1) infinite; animation-delay:.7s; }
.vw-img{ width:34%; height:44px; border-radius:8px; background:linear-gradient(135deg, rgba(76,111,255,.35), rgba(124,92,255,.35)); position:relative; overflow:hidden; animation:vwImg 5s ease infinite; animation-delay:.9s; }
.vw-img span{ position:absolute; left:18%; bottom:-10px; width:64%; height:28px; border-radius:50% 50% 0 0; background:rgba(255,255,255,.45); }
@keyframes vwIn  { 0%,4%{ opacity:0; } 10%,88%{ opacity:1; } 96%,100%{ opacity:0; } }
@keyframes vwLine{ 0%,6%{ transform:scaleX(0); opacity:1; } 18%,88%{ transform:scaleX(1); opacity:1; } 96%,100%{ transform:scaleX(1); opacity:0; } }
@keyframes vwPop { 0%,10%{ transform:scale(0); } 18%,88%{ transform:scale(1); opacity:1; } 96%,100%{ transform:scale(1); opacity:0; } }
@keyframes vwImg { 0%,10%{ opacity:0; transform:scale(.85); } 22%,88%{ opacity:1; transform:none; } 96%,100%{ opacity:0; transform:none; } }

.viz-app{ padding:10px 14px; }
.va-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; height:18px; }
.va-t{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.va-toast{
  font-size:10.5px; font-weight:700; color:#fff; padding:3px 8px; border-radius:999px;
  background:linear-gradient(90deg,#14A44D,#2BBF6A);
  opacity:0; transform:translate3d(12px,0,0);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.va-toast.is-restock{ background:linear-gradient(90deg,#4C6FFF,#7C5CFF); }
.va-toast.is-show{ opacity:1; transform:none; }
.va-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:700; line-height:1.3; }
.va-name{ opacity:.75; font-weight:600; }
.va-num{ font-variant-numeric:tabular-nums; font-size:14px; font-weight:800; display:inline-block; transition:transform .35s cubic-bezier(.3,1.6,.5,1), color .3s ease; }
.va-num.is-tick{ transform:scale(1.25); color:#E0393E; }
.va-bar{ height:5px; margin:4px 0 8px; border-radius:3px; background:var(--v-soft); overflow:hidden; }
.va-bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#4C6FFF,#7C5CFF); transform-origin:0 50%; transform:scaleX(.8); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.va-bar2 i{ transform:scaleX(.53); }

.viz-bot{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; font-size:11.5px; font-weight:600; line-height:1.3; }
.vb-msg{ max-width:82%; padding:6px 10px; border-radius:12px; opacity:0; }
.vb-in{ align-self:flex-start; background:var(--v-soft); border-bottom-left-radius:4px; animation:vbIn 6s cubic-bezier(.2,.8,.2,1) infinite; }
.vb-out{ align-self:flex-end; color:#fff; background:linear-gradient(135deg,#4C6FFF,#7C5CFF); border-bottom-right-radius:4px; animation:vbOut 6s cubic-bezier(.2,.8,.2,1) infinite; }
.vb-typing{ align-self:flex-end; display:flex; gap:3px; padding:7px 10px; border-radius:12px; background:var(--v-soft); opacity:0; animation:vbType 6s ease infinite; position:absolute; right:12px; bottom:12px; }
.vb-typing i{ width:5px; height:5px; border-radius:50%; background:var(--v-ink); animation:vbDot .9s ease-in-out infinite; }
.vb-typing i:nth-child(2){ animation-delay:.15s; } .vb-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes vbIn  { 0%,4%{ opacity:0; transform:translate3d(-8px,6px,0); } 12%,88%{ opacity:1; transform:none; } 96%,100%{ opacity:0; } }
@keyframes vbType{ 0%,18%{ opacity:0; transform:scale(.8); } 24%,44%{ opacity:1; transform:none; } 48%,100%{ opacity:0; } }
@keyframes vbOut { 0%,46%{ opacity:0; transform:translate3d(8px,6px,0) scale(.96); } 54%,88%{ opacity:1; transform:none; } 96%,100%{ opacity:0; } }
@keyframes vbDot { 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-3px); opacity:1; } }

.svc-actions{ margin-top:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:relative; z-index:1; }
.svc-actions .svc-more{ margin-top:0; }
.svc-example{
  font-size:13px; font-weight:600; color:var(--text-dim); position:relative;
  text-decoration:none; transition:color .2s ease;
}
.svc-example::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; opacity:.35; transform-origin:0 50%; transition:transform .3s ease, opacity .3s ease; }
.svc-example:hover{ color:var(--text); }
.svc-example:hover::after{ opacity:.8; }

.svc-edge{
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  padding:1px;
  background:radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(124,92,255,.95), rgba(76,111,255,.55) 35%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0; transition:opacity .35s ease;
}
@media (hover:hover) and (pointer:fine){ .svc-card:hover .svc-edge{ opacity:1; } }

.svc-combo{
  margin-top:26px; position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:36px; align-items:center;
  padding:26px 32px; border-radius:var(--radius, 20px);
  background:rgba(255,255,255,.9); border:1px solid rgba(76,111,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -26px rgba(76,111,255,.35);
}
html[data-theme="dark"] .svc-combo{ background:rgba(16,16,22,.9); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 44px -22px rgba(76,111,255,.45); }
.sc-kicker{
  display:inline-block; font:600 11px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--btn-bg); margin-bottom:10px;
}
.sc-copy p{ font-size:14.5px; line-height:1.55; color:var(--text-dim); margin-bottom:14px; max-width:430px; }
.sc-flow{ display:flex; align-items:flex-start; justify-content:space-between; }
.sc-node{ flex:0 0 auto; width:104px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
.sc-ic{
  width:46px; height:46px; border-radius:14px; margin-bottom:6px;
  display:flex; align-items:center; justify-content:center; color:var(--btn-bg);
  background:var(--surface-2, #F1F3FF); border:1px solid rgba(76,111,255,.25);
  transition:box-shadow .3s ease;
}
.sc-node b{ font-size:13.5px; }
.sc-node small{ font-size:12px; color:var(--text-dim); line-height:1.3; }
.sc-link{ flex:1; height:2px; margin-top:23px; position:relative; border-radius:2px; background:repeating-linear-gradient(90deg, rgba(76,111,255,.35) 0 6px, transparent 6px 11px); }
.sc-link i{
  position:absolute; top:50%; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(76,111,255,.9), 0 0 14px 4px rgba(124,92,255,.7);
  opacity:0;
}
.svc-combo.is-live .sc-l1 i{ animation:scRun 3.6s cubic-bezier(.6,0,.4,1) infinite; }
.svc-combo.is-live .sc-l2 i{ animation:scRun 3.6s cubic-bezier(.6,0,.4,1) infinite; animation-delay:1.2s; }
.svc-combo.is-live .sc-n1 .sc-ic{ animation:scGlow 3.6s ease infinite; }
.svc-combo.is-live .sc-n2 .sc-ic{ animation:scGlow 3.6s ease infinite; animation-delay:1.2s; }
.svc-combo.is-live .sc-n3 .sc-ic{ animation:scGlow 3.6s ease infinite; animation-delay:2.4s; }
@keyframes scRun{ 0%{ left:0; opacity:0; } 6%{ opacity:1; } 30%{ left:100%; opacity:1; } 34%,100%{ left:100%; opacity:0; } }
@keyframes scGlow{
  0%,22%,100%{ box-shadow:0 0 0 0 rgba(76,111,255,0); }
  6%{ box-shadow:0 0 0 5px rgba(76,111,255,.22), 0 10px 22px -8px rgba(76,111,255,.6); }
}

@media (max-width:900px){
  .svc-combo{ grid-template-columns:1fr; gap:22px; padding:22px 18px; margin-top:22px; }
  .sc-node{ width:88px; }
  .sc-node small{ font-size:11px; }
}
@media (max-width:380px){ .sc-node{ width:76px; } }

#mensaje.is-prefilled{ animation:svcPrefill 1.6s ease; }
@keyframes svcPrefill{
  0%{ box-shadow:0 0 0 0 rgba(76,111,255,.0); }
  20%{ box-shadow:0 0 0 4px rgba(76,111,255,.35); }
  100%{ box-shadow:0 0 0 0 rgba(76,111,255,0); }
}

@media (prefers-reduced-motion:reduce){
  .svc-viz *, .svc-combo * { animation:none !important; }
  .vb-msg, .vw-nav, .vw-img{ opacity:1; }
  .vb-typing{ display:none; }
}

@media (min-width:901px) and (max-height:950px) and (not ((max-width:1680px) and (hover:hover) and (pointer:fine))){
  .svc-viz{ height:clamp(84px, calc(3vh + 66px), 104px); margin-bottom:clamp(11px, calc(3.14vh + -7.86px), 22px); }
}

.svc-card{ cursor:pointer; padding:30px 30px 22px; }
.svc-demo[hidden], .svc-detail[hidden]{ display:none !important; }
.svc-ico{
  position:relative; z-index:1; width:46px; height:46px; margin-bottom:28px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--btn-bg); background:rgba(76,111,255,.08); border:1px solid rgba(76,111,255,.16);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
html[data-theme="dark"] .svc-ico{ color:#9DB0FF; background:rgba(124,140,255,.1); border-color:rgba(124,140,255,.2); }
.svc-ico svg{ width:22px; height:22px; }
.svc-card h3{ font-size:20px; letter-spacing:-.02em; margin-bottom:8px; }
.svc-card .svc-line{ font-size:14.5px; line-height:1.55; margin-bottom:28px; text-wrap:pretty; }

.svc-open{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; margin-top:auto; padding:16px 0 0; border:0; border-top:1px solid rgba(76,111,255,.16);
  background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:600 14px/1.2 'Figtree', system-ui, sans-serif; color:var(--text); text-align:left;
  position:static;
}
html[data-theme="dark"] .svc-open{ border-top-color:rgba(255,255,255,.08); }
.svc-open > span{ position:relative; z-index:1; }
.svc-open::after{ content:''; position:absolute; inset:0; z-index:3; }
.svc-open:focus{ outline:none; }
.svc-card:has(.svc-open:focus-visible){ outline:2px solid var(--btn-bg); outline-offset:3px; }

.svc-plus{
  position:relative; z-index:1; width:30px; height:30px; flex-shrink:0; border-radius:50%;
  background:rgba(76,111,255,.09); color:var(--btn-bg);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background-color .2s ease, color .2s ease;
}
html[data-theme="dark"] .svc-plus{ background:rgba(124,140,255,.14); color:#9DB0FF; }
.svc-plus::before, .svc-plus::after{
  content:''; position:absolute; left:50%; top:50%; width:11px; height:1.75px; margin:-.875px 0 0 -5.5px;
  background:currentColor; border-radius:1px;
}
.svc-plus::after{ transform:rotate(90deg); }
@media (hover:hover) and (pointer:fine){
  .svc-card:hover .svc-plus{ transform:rotate(90deg); background-color:var(--btn-bg); color:#fff; }
  .svc-card:hover .svc-ico{ background:var(--btn-bg); border-color:var(--btn-bg); color:#fff; }
}
.svc-open:active .svc-plus{ transform:scale(.92); }

@media (max-width:900px){
  .svc-card{ padding:24px 22px 18px; }
  .svc-ico{ width:42px; height:42px; margin-bottom:20px; border-radius:12px; }
  .svc-card h3{ font-size:19px; }
  .svc-card .svc-line{ margin-bottom:22px; }
  .svc-open{ padding-top:14px; }
}

.svc-no-modal .svc-open{ display:none; }
.svc-no-modal .svc-card{ cursor:auto; }
.svc-no-modal .svc-demo{ display:none !important; }
.svc-no-modal .svc-inc{ font-size:13px; margin:0 0 10px; }

html.svm-lock, html.svm-lock body{ overflow:hidden; }
html.svm-lock{ scrollbar-gutter:stable; }

.svc-modal{
  --svm-pad:40px;
  --svm-panel:#fff;
  --svm-rule:rgba(20,24,60,.08);
  position:fixed; inset:0; width:auto; height:auto; max-width:none; max-height:none;
  margin:0; padding:24px; border:0; background:transparent; color:var(--text);
  overflow:hidden; overscroll-behavior:contain;
}
html[data-theme="dark"] .svc-modal{ --svm-panel:#101016; --svm-rule:rgba(255,255,255,.08); }
.svc-modal[open]{ display:flex; align-items:center; justify-content:center; }
.svc-modal::backdrop{
  background:rgba(10,12,30,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .28s ease;
}
.svc-modal.is-in::backdrop{ opacity:1; }

.svm-panel{
  position:relative; width:min(960px, 100%); height:min(548px, 100%);
  display:grid; grid-template-columns:minmax(0, 44fr) minmax(0, 56fr);
  overflow:hidden;
  background:var(--svm-panel); border:1px solid rgba(76,111,255,.2); border-radius:24px;
  box-shadow:0 48px 100px -32px rgba(20,24,70,.5), 0 12px 28px -18px rgba(20,24,70,.25);
  opacity:0; transform:translate3d(0,14px,0) scale(.975);
  transition:opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
.svc-modal:not(.has-stage) .svm-panel{ width:min(560px, 100%); grid-template-columns:minmax(0,1fr); }
html[data-theme="dark"] .svm-panel{
  border-color:rgba(124,140,255,.18);
  box-shadow:0 48px 100px -32px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.svc-modal.is-in .svm-panel{ opacity:1; transform:none; }

.svm-stage{
  position:relative; display:flex; align-items:center; justify-content:center; padding:40px 36px;
  border-right:1px solid var(--svm-rule); overflow:hidden; isolation:isolate;
  background:
    radial-gradient(70% 55% at 30% 20%, rgba(124,92,255,.16), transparent 70%),
    radial-gradient(60% 50% at 80% 90%, rgba(76,111,255,.16), transparent 70%),
    linear-gradient(165deg, #F5F7FF, #ECEFFF);
}
html[data-theme="dark"] .svm-stage{
  background:
    radial-gradient(70% 55% at 30% 20%, rgba(124,92,255,.18), transparent 70%),
    radial-gradient(60% 50% at 80% 90%, rgba(76,111,255,.16), transparent 70%),
    linear-gradient(165deg, #121424, #0b0c15);
}
.svm-stage[hidden]{ display:none; }

.svm-stage .svc-demo{
  margin:0; display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translate3d(0,10px,0) scale(.97);
  transition:opacity .4s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1) .1s;
}
.svc-modal.is-in .svm-stage .svc-demo{ opacity:1; transform:none; }
.svm-stage .svc-viz{
  zoom:1.55; width:222px; margin:0; border-radius:11px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 50px -26px rgba(76,111,255,.6), 0 4px 10px -4px rgba(30,36,71,.12);
}
html[data-theme="dark"] .svm-stage .svc-viz{ box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 28px 50px -26px rgba(0,0,0,.9); }
.svm-stage .svc-viz, .svc-card:hover .svm-stage .svc-viz{ transform:none; }
.svm-stage figcaption{
  margin-top:28px; max-width:30ch; text-align:center; text-wrap:balance;
  font-size:13.5px; line-height:1.55; color:var(--text-dim);
}

.svm-main{ display:flex; flex-direction:column; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.svm-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:36px var(--svm-pad) 0;
}
.svm-title h3{ font-size:26px; line-height:1.2; letter-spacing:-.025em; padding-top:2px; }
.svm-close{
  flex-shrink:0; width:36px; height:36px; margin:-4px -10px 0 0; border-radius:50%; border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; color:var(--text-dim);
  transition:background-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.svm-close:hover{ background:var(--surface-2); color:var(--text); }
.svm-close:focus-visible{ outline:2px solid var(--btn-bg); outline-offset:2px; }
.svm-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.svm-body{ flex:1; display:flex; flex-direction:column; padding:16px var(--svm-pad) 0; }
.svm-body .svc-detail{ flex:1; display:flex; flex-direction:column; }
.svm-body .svc-desc{ font-size:15.5px; line-height:1.7; color:var(--text-dim); max-width:52ch; text-wrap:pretty; }
.svm-body .svc-inc{
  font:600 13.5px/1.3 'Sora', sans-serif; letter-spacing:-.01em; color:var(--text);
  margin:32px 0 6px;
}
.svm-body .svc-list{ gap:0; margin:0 0 36px; }
.svm-body .svc-list li{
  font-size:14.5px; line-height:1.45; color:var(--text); gap:12px;
  padding:14px 0; border-bottom:1px solid var(--svm-rule);
}
.svm-body .svc-list li:last-child{ border-bottom:0; }
.svm-body .svc-list li::before{ margin-top:2px; }

.svm-body .svc-actions{
  position:sticky; bottom:0; z-index:2; margin-top:auto;
  display:flex; align-items:center; justify-content:flex-end; gap:24px; flex-wrap:nowrap;
  margin-left:calc(-1 * var(--svm-pad)); margin-right:calc(-1 * var(--svm-pad));
  padding:20px var(--svm-pad) 24px;
  background:var(--svm-panel); border-top:1px solid var(--svm-rule);
}
.svm-body .svc-example{ order:-1; margin-right:auto; font-size:14px; }
.svm-body .svc-more{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:0; padding:12px 22px; min-height:46px; border-radius:10px; font-size:14.5px;
  background:var(--cta-bg); color:var(--cta-text);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.4);
  transition:background-color .18s ease, transform .18s ease;
}
.svm-body .svc-more:hover{ background:var(--cta-bg-hover); transform:translateY(-1px); }
.svm-body .svc-more:hover svg{ transform:translate(2px,-2px); }
.svm-body .svc-more:focus-visible, .svm-body .svc-example:focus-visible{ outline:2px solid var(--btn-bg); outline-offset:3px; }

.svm-grab{ display:none; }

@media (max-width:760px){
  .svc-modal{ --svm-pad:22px; padding:0; padding-top:max(32px, env(safe-area-inset-top, 0px)); }
  .svc-modal[open]{ align-items:flex-end; }
  .svm-panel, .svc-modal:not(.has-stage) .svm-panel{
    width:100%; height:auto; max-height:100%;
    display:block; overflow-y:auto; overscroll-behavior:contain;
    border-radius:24px 24px 0 0; border-bottom:0;
    opacity:1; transform:translate3d(0,100%,0);
    transition:transform .36s cubic-bezier(.2,.8,.2,1);
  }
  .svm-panel.is-drag{ transition:none; }
  .svc-modal.is-in .svm-panel{ transform:none; }
  .svm-grab{
    display:block; position:absolute; top:8px; left:50%; z-index:3;
    width:36px; height:4px; margin-left:-18px; border-radius:2px; background:rgba(30,36,71,.22);
  }
  html[data-theme="dark"] .svm-grab{ background:rgba(255,255,255,.24); }
  .svm-stage{ padding:40px var(--svm-pad) 28px; border-right:0; border-bottom:1px solid var(--svm-rule); }
  .svm-stage .svc-viz{ zoom:1.25; width:min(300px, calc((100vw - 2 * var(--svm-pad)) / 1.25)); }
  .svm-stage figcaption{ margin-top:20px; font-size:13px; }
  .svc-modal:not(.has-stage) .svm-head{ padding-top:36px; }
  .svm-main{ display:block; overflow:visible; }
  .svm-head{ padding:28px var(--svm-pad) 0; }
  .svm-title h3{ font-size:22px; }
  .svm-body{ display:block; padding-top:12px; }
  .svm-body .svc-desc{ font-size:15px; line-height:1.65; }
  .svm-body .svc-inc{ margin-top:28px; }
  .svm-body .svc-list{ margin-bottom:28px; }
  .svm-body .svc-actions{
    flex-direction:column; align-items:stretch; gap:4px;
    padding:16px var(--svm-pad) calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .svm-body .svc-more{ align-self:stretch; min-height:50px; font-size:15px; }
  .svm-body .svc-example{ order:0; margin:0; align-self:center; padding:12px 0 4px; }
  .svm-body .svc-example::after{ bottom:1px; }
}

@media (prefers-reduced-motion:reduce){
  .svc-modal::backdrop, .svm-panel, .svm-stage .svc-demo{ transition:none; }
  .svm-panel, .svc-modal.is-in .svm-panel, .svm-stage .svc-demo{ transform:none; opacity:1; }
  .svc-plus, .svc-ico{ transition:none; }
  .svc-card:hover .svc-plus{ transform:none; }
}

#servicios .svc-card{ --acc:#4C6FFF; --acc-2:#6F8CFF; }
#servicios .svc-card[data-svc-card="app"]{ --acc:#5B5CF0; --acc-2:#8484FF; }
#servicios .svc-card[data-svc-card="bot"]{ --acc:#7C4DFF; --acc-2:#A07BFF; }

#servicios .svc-card{
  border-color:color-mix(in srgb, var(--acc) 22%, transparent);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 60%),
    #fff;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(30,27,75,.03), 0 24px 48px -28px color-mix(in srgb, var(--acc) 45%, transparent);
  transition:border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
html[data-theme="dark"] #servicios .svc-card{
  border-color:color-mix(in srgb, var(--acc) 26%, transparent);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
    #101016;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -28px color-mix(in srgb, var(--acc) 55%, transparent);
}
#servicios .svc-card::after{ display:none; }
#servicios .svc-card::before{
  background:radial-gradient(300px circle at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--acc) 9%, transparent), transparent 65%);
  opacity:0;
}
@media (hover:hover) and (pointer:fine){
  #servicios .svc-card:hover{
    border-color:color-mix(in srgb, var(--acc) 50%, transparent);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px rgba(30,27,75,.04), 0 32px 60px -28px color-mix(in srgb, var(--acc) 60%, transparent);
  }
  #servicios .svc-card:hover::before{ opacity:1; }
}

.svc-mark{
  position:absolute; top:-26px; right:-30px; z-index:0; pointer-events:none;
  color:var(--acc); transform:rotate(-10deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.svc-mark svg{ width:160px; height:160px; display:block; opacity:.07; transition:opacity .4s ease; }
html[data-theme="dark"] .svc-mark svg{ opacity:.075; }
@media (hover:hover) and (pointer:fine){
  #servicios .svc-card:hover .svc-mark{ transform:rotate(-4deg) translate3d(-4px,4px,0); }
  #servicios .svc-card:hover .svc-mark svg{ opacity:.13; }
}

#servicios .svc-ico{
  width:52px; height:52px; border-radius:15px; border:0; margin-bottom:30px;
  color:#fff; background:linear-gradient(140deg, var(--acc-2), var(--acc));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 24px -10px color-mix(in srgb, var(--acc) 70%, transparent);
}
#servicios .svc-ico svg{ width:24px; height:24px; }
@media (hover:hover) and (pointer:fine){
  #servicios .svc-card:hover .svc-ico{ background:linear-gradient(140deg, var(--acc-2), var(--acc)); color:#fff; transform:translateY(-2px); }
}
#servicios .svc-ico{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }

#servicios .svc-card h3{ font-size:21px; margin-bottom:10px; }
#servicios .svc-card .svc-line{ color:var(--text-dim); }

#servicios .svc-open{ border-top-color:color-mix(in srgb, var(--acc) 14%, transparent); color:var(--acc); }
html[data-theme="dark"] #servicios .svc-open{ color:var(--acc-2); border-top-color:rgba(255,255,255,.08); }
#servicios .svc-plus{ background:color-mix(in srgb, var(--acc) 10%, transparent); color:var(--acc); }
html[data-theme="dark"] #servicios .svc-plus{ background:color-mix(in srgb, var(--acc) 20%, transparent); color:var(--acc-2); }
@media (hover:hover) and (pointer:fine){
  #servicios .svc-card:hover .svc-plus{ background:var(--acc); color:#fff; }
}

@media (max-width:900px){
  #servicios .svc-ico{ width:46px; height:46px; border-radius:13px; margin-bottom:22px; }
  #servicios .svc-card h3{ font-size:19.5px; }
  .svc-mark{ top:-22px; right:-26px; }
  .svc-mark svg{ width:136px; height:136px; }
}
@media (prefers-reduced-motion:reduce){ .svc-mark, #servicios .svc-ico{ transition:none; } }

.svc-mark{ top:26px; right:26px; transform:none; }
.svc-mark svg{ width:92px; height:92px; opacity:.09; }
html[data-theme="dark"] .svc-mark svg{ opacity:.09; }
@media (hover:hover) and (pointer:fine){
  #servicios .svc-card:hover .svc-mark{ transform:translate3d(0,-3px,0); }
  #servicios .svc-card:hover .svc-mark svg{ opacity:.16; }
}
@media (max-width:900px){
  .svc-mark{ top:22px; right:22px; }
  .svc-mark svg{ width:78px; height:78px; }
}

.svm-stage .svc-demo{ width:100%; }
.svm-stage .dm-web + figcaption{ margin-top:48px; }
.svm-stage .dm-app + figcaption, .svm-stage .dm-bot + figcaption{ margin-top:26px; }
@media (max-width:760px){
  .svm-stage{ padding-top:36px; }
  .svm-stage .dm-web + figcaption{ margin-top:40px; }
}

@media (max-width:760px){
  .svc-modal{ padding-top:max(24px, env(safe-area-inset-top, 0px)); }
  .svc-modal::backdrop{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,10,24,.62); }

  .svm-panel, .svc-modal:not(.has-stage) .svm-panel{
    display:flex; flex-direction:column; overflow:hidden;
    will-change:transform; backface-visibility:hidden;
    transition:transform .42s cubic-bezier(.32,.72,0,1);
  }
  .svm-panel.is-drag{ transition:none; }

  .svm-stage{
    flex:none; height:clamp(236px, 36vh, 300px); padding:28px 16px 14px;
    contain:layout paint style;
  }
  .svm-stage .svc-demo{
    width:100%; height:100%; justify-content:center;
    transform:none; opacity:0; transition:opacity .3s ease .28s;
  }
  .svc-modal.is-in .svm-stage .svc-demo{ opacity:1; }
  .svm-stage .dm{ zoom:.74; }
  .svm-stage .dm-bot{ zoom:.62; }
  .svm-stage .dm-app{ padding-top:40px; }
  .svm-stage figcaption,
  .svm-stage .dm-web + figcaption,
  .svm-stage .dm-app + figcaption,
  .svm-stage .dm-bot + figcaption{ display:none; }

  .svm-main{
    flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .svm-head{ padding:20px var(--svm-pad) 0; }
  .svc-modal:not(.has-stage) .svm-head{ padding-top:30px; }
  .svm-title h3{ font-size:21px; }
  .svm-body{ display:flex; flex-direction:column; flex:1; padding-top:8px; }
  .svm-body .svc-desc{ font-size:14.5px; line-height:1.6; }
  .svm-body .svc-inc{ margin:20px 0 2px; }
  .svm-body .svc-list{ margin-bottom:16px; }
  .svm-body .svc-list li{ padding:10px 0; font-size:14px; }

  .svm-body .svc-actions{
    flex-direction:row; align-items:center; gap:14px;
    padding:12px var(--svm-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .svm-body .svc-more{ flex:1; min-height:48px; font-size:15px; }
  .svm-body .svc-example{ order:1; flex:none; margin:0; padding:8px 0; font-size:13.5px; }
}
@media (max-width:760px) and (max-height:640px){
  .svm-stage{ height:210px; padding-top:22px; }
  .svm-stage .dm{ zoom:.64; }
  .svm-stage .dm-bot{ zoom:.52; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .svm-stage .svc-demo, .svc-modal.is-in .svm-stage .svc-demo{ opacity:1; transition:none; }
}

@media (max-width:760px){
  .svc-modal{ touch-action:none; overscroll-behavior:none; }
  .svm-main{ touch-action:pan-y; overscroll-behavior-y:contain; }
  .svm-body .svc-actions a{ touch-action:manipulation; }
  html.svm-lock .svc-combo *{ animation-play-state:paused !important; }
}

@media (max-width:760px){
  .svc-modal{
    padding:max(14px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  .svc-modal[open]{ align-items:flex-start; }
  .svc-modal::backdrop{
    background:rgba(8,10,24,.42);
    -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
    opacity:0; transition:opacity .3s ease;
  }
  .svc-modal.is-in::backdrop{ opacity:1; }

  .svm-panel, .svc-modal:not(.has-stage) .svm-panel{
    border-radius:24px; border-bottom:1px solid rgba(76,111,255,.2);
    max-height:100%;
    opacity:0; transform:scale(.62);
    transition:opacity .22s ease, transform .52s cubic-bezier(.3,1.25,.5,1);
  }
  html[data-theme="dark"] .svm-panel{ border-bottom-color:rgba(124,140,255,.18); }
  .svc-modal.is-in .svm-panel{ opacity:1; transform:none; }
  .svm-grab{ display:none; }

  .svm-head, .svm-body .svc-desc, .svm-body .svc-inc, .svm-body .svc-list li, .svm-body .svc-actions{
    opacity:0; transform:translate3d(0,12px,0);
    transition:opacity .2s ease, transform .2s ease;
  }
  .svc-modal.is-in .svm-head,
  .svc-modal.is-in .svm-body .svc-desc,
  .svc-modal.is-in .svm-body .svc-inc,
  .svc-modal.is-in .svm-body .svc-list li,
  .svc-modal.is-in .svm-body .svc-actions{
    opacity:1; transform:none;
    transition:opacity .38s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .svc-modal.is-in .svm-head{ transition-delay:.12s; }
  .svc-modal.is-in .svm-body .svc-desc{ transition-delay:.17s; }
  .svc-modal.is-in .svm-body .svc-inc{ transition-delay:.22s; }
  .svc-modal.is-in .svm-body .svc-list li:nth-child(1){ transition-delay:.26s; }
  .svc-modal.is-in .svm-body .svc-list li:nth-child(2){ transition-delay:.30s; }
  .svc-modal.is-in .svm-body .svc-list li:nth-child(3){ transition-delay:.34s; }
  .svc-modal.is-in .svm-body .svc-list li:nth-child(n+4){ transition-delay:.38s; }
  .svc-modal.is-in .svm-body .svc-actions{ transition-delay:.36s; }

  .svm-stage .svc-demo{ transition:opacity .35s ease .2s; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .svm-panel, .svc-modal:not(.has-stage) .svm-panel,
  .svm-head, .svm-body .svc-desc, .svm-body .svc-inc, .svm-body .svc-list li, .svm-body .svc-actions{
    transform:none !important; transition:opacity .2s ease !important;
  }
}

@property --svm-acc{ syntax:'<color>'; inherits:true; initial-value:#4C6FFF; }
.svc-modal{ --svm-acc:#4C6FFF; --svm-dir:1; transition:--svm-acc .7s ease; }
.svc-modal[data-svc="app"]{ --svm-acc:#5B5CF0; }
.svc-modal[data-svc="bot"]{ --svm-acc:#7C4DFF; }

.svm-stage{
  flex-direction:column; padding-bottom:84px;
  background:
    radial-gradient(70% 55% at 30% 20%, color-mix(in srgb, var(--svm-acc) 17%, transparent), transparent 70%),
    radial-gradient(60% 50% at 80% 90%, color-mix(in srgb, var(--svm-acc) 15%, transparent), transparent 70%),
    linear-gradient(165deg, #F5F7FF, #ECEFFF);
}
html[data-theme="dark"] .svm-stage{
  background:
    radial-gradient(70% 55% at 30% 20%, color-mix(in srgb, var(--svm-acc) 20%, transparent), transparent 70%),
    radial-gradient(60% 50% at 80% 90%, color-mix(in srgb, var(--svm-acc) 16%, transparent), transparent 70%),
    linear-gradient(165deg, #121424, #0b0c15);
}
.svm-slot{ display:flex; flex-direction:column; align-items:center; perspective:1100px; }

.svm-stage::after{
  content:''; position:absolute; inset:-10% auto -10% 0; width:55%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55) 50%, transparent);
  opacity:0; transform:translateX(-120%) skewX(-14deg);
}
html[data-theme="dark"] .svm-stage::after{ background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--svm-acc) 30%, transparent) 50%, transparent); }
.svc-modal.is-arriving .svm-stage::after{ animation:svm-sweep .8s cubic-bezier(.3,.7,.2,1) both; }
.svc-modal.is-arriving[style*="--svm-dir: -1"] .svm-stage::after{ animation-name:svm-sweep-rev; }
@keyframes svm-sweep{ 0%{ opacity:0; transform:translateX(-120%) skewX(-14deg); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateX(260%) skewX(-14deg); } }
@keyframes svm-sweep-rev{ 0%{ opacity:0; transform:translateX(260%) skewX(14deg); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateX(-120%) skewX(14deg); } }

.svm-nav{
  position:absolute; left:50%; bottom:22px; z-index:2; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:5px;
  border-radius:999px; background:rgba(255,255,255,.7); border:1px solid rgba(30,36,71,.08);
  box-shadow:0 10px 28px -14px rgba(30,36,71,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html[data-theme="dark"] .svm-nav{ background:rgba(20,22,36,.7); border-color:rgba(255,255,255,.08); box-shadow:0 10px 28px -14px rgba(0,0,0,.8); }
.svm-nav[hidden]{ display:none; }
.svm-arrow{
  width:34px; height:34px; border-radius:50%; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  transition:background-color .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.svm-arrow svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.svm-arrow:hover{ background:color-mix(in srgb, var(--svm-acc) 12%, transparent); }
.svm-prev:hover svg{ transform:translateX(-2px); }
.svm-next:hover svg{ transform:translateX(2px); }
.svm-arrow:active{ transform:scale(.92); }
.svm-arrow:focus-visible, .svm-dot:focus-visible{ outline:2px solid var(--svm-acc); outline-offset:2px; }
.svm-dots{ display:flex; align-items:center; gap:6px; padding:0 4px; }
.svm-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:color-mix(in srgb, var(--text) 22%, transparent);
  transition:width .45s cubic-bezier(.2,.8,.2,1), background-color .45s ease;
  -webkit-tap-highlight-color:transparent;
}
.svm-dot:hover{ background:color-mix(in srgb, var(--text) 40%, transparent); }
.svm-dot.is-on{ width:22px; background:var(--svm-acc); }

.svc-modal .svm-title h3,
.svc-modal .svm-body .svc-desc,
.svc-modal .svm-body .svc-inc,
.svc-modal .svm-body .svc-list li,
.svc-modal .svm-body .svc-actions{ will-change:auto; }

.svc-modal.is-in.is-leaving .svm-stage .svc-demo{
  opacity:0; filter:blur(8px);
  transform:translate3d(calc(var(--svm-dir) * -70px),0,0) rotateY(calc(var(--svm-dir) * 18deg)) scale(.92);
  transition:opacity .26s ease, transform .3s cubic-bezier(.5,0,.75,0), filter .3s ease;
}
.svc-modal.is-leaving .svm-title h3,
.svc-modal.is-leaving .svm-body .svc-desc,
.svc-modal.is-leaving .svm-body .svc-inc,
.svc-modal.is-leaving .svm-body .svc-list li{
  opacity:0; filter:blur(6px);
  transform:translate3d(calc(var(--svm-dir) * -28px),0,0);
  transition:opacity .22s ease, transform .28s cubic-bezier(.5,0,.75,0), filter .28s ease;
}
.svc-modal.is-leaving .svm-body .svc-actions .svc-more{ opacity:.35; transition:opacity .2s ease; }

.svc-modal.is-in.is-entering .svm-stage .svc-demo{
  opacity:0; filter:blur(10px); transition:none;
  transform:translate3d(calc(var(--svm-dir) * 80px),0,0) rotateY(calc(var(--svm-dir) * -20deg)) scale(.92);
}
.svc-modal.is-entering .svm-title h3,
.svc-modal.is-entering .svm-body .svc-desc,
.svc-modal.is-entering .svm-body .svc-inc,
.svc-modal.is-entering .svm-body .svc-list li{
  opacity:0; filter:blur(6px); transition:none;
  transform:translate3d(calc(var(--svm-dir) * 36px),0,0);
}
.svc-modal.is-entering .svm-body .svc-actions .svc-more{ opacity:.35; transition:none; }

.svc-modal.is-in.is-arriving .svm-stage .svc-demo{
  opacity:1; filter:none; transform:none;
  transition:opacity .5s ease, transform .75s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.svc-modal.is-arriving .svm-title h3,
.svc-modal.is-arriving .svm-body .svc-desc,
.svc-modal.is-arriving .svm-body .svc-inc,
.svc-modal.is-arriving .svm-body .svc-list li{
  opacity:1; filter:none; transform:none;
  transition:opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.svc-modal.is-arriving .svm-title h3{ transition-delay:.04s; }
.svc-modal.is-arriving .svm-body .svc-desc{ transition-delay:.1s; }
.svc-modal.is-arriving .svm-body .svc-inc{ transition-delay:.16s; }
.svc-modal.is-arriving .svm-body .svc-list li{ transition-delay:calc(.2s + var(--k, 0) * .06s); }
.svc-modal.is-arriving .svm-body .svc-actions .svc-more{ opacity:1; transition:opacity .4s ease .25s; }

@media (max-width:760px){
  .svm-stage{ height:clamp(286px, 42vh, 350px); padding-bottom:64px; }
  .svm-slot{ flex:1; min-height:0; width:100%; }
  .svm-nav{ bottom:12px; padding:3px; }
  .svm-arrow{ width:38px; height:38px; }
}
@media (max-width:760px) and (max-height:640px){
  .svm-stage{ height:262px; padding-bottom:58px; }
}
@media (prefers-reduced-motion:reduce){
  .svc-modal{ transition:none; }
  .svm-stage::after{ display:none; }
  .svm-dot{ transition:none; }
}