/* Elio · kit de demos (dx): apps simuladas con la piel del producto (lienzo crema, acento durazno→magenta, dock de vidrio).
   Estructura: figure.dx > .dx-top (título, pasos, pausa) + .dx-stage > .dx-win (barra, app con dock y pantallas, capas)
   + figcaption. Las pantallas (.dx-screen) se apilan y se suceden con un fundido en dos tiempos; el motor (dx.js) las cambia.
   Sin JS se ve la pantalla inicial completa; con movimiento reducido no hay transiciones. */
.dx{--dx-canvas:#faf5ef;--dx-card:#ffffff;--dx-line:#efe4d8;--dx-line-2:#e4d5c6;--dx-ink:#121633;--dx-ink-2:#454b66;--dx-ink-3:var(--ink-3);
  --dx-peach:#fff3ec;--dx-peach-2:#ffe2d4;--dx-acc:#e5612d;--dx-acc-ink:#b33d18;--dx-ok:#137a46;--dx-ok-bg:#e6f6ec;--dx-warn:#9a5b00;--dx-warn-bg:#fff2d6;
  --dx-info:#3b46a8;--dx-info-bg:#eef0ff;--dx-bad:#b42318;--dx-bad-bg:#fdecea;--dx-r:14px;
  position:relative;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%;font-family:var(--sans);color:var(--dx-ink-2);font-size:13px;line-height:1.4}
.dx *{box-sizing:border-box}

/* Encabezado: título, pasos y pausa */
.dx-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.dx-title{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:600;color:var(--ink)}
/* punto de la demo: acento de la marca (el verde es solo para éxito); keyframes propios para no tocar el pulse global */
.dx-title .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--grad-cta);box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 45%,transparent);animation:dxPulse 2.2s infinite}
.dx.is-paused .dx-title .dot{animation:none}
@keyframes dxPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 45%,transparent)}70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--orange) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 0%,transparent)}}
.dx-title small{padding:2px 8px;border-radius:99px;background:var(--bg-2);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dx-steps{order:3;flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(148px,1fr);gap:6px;list-style:none;margin:0;padding:2px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.dx-steps::-webkit-scrollbar{display:none}
.dx-steps li{display:flex;min-width:0}
.dx-steps button{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:50px;padding:7px 12px 9px 8px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper);font-size:12.5px;line-height:1.25;font-weight:500;color:var(--ink-3);cursor:pointer;overflow:hidden;text-align:left;text-wrap:balance;transition:background-color .25s,color .25s,border-color .25s}
.dx-steps button b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--bg-2);font-size:12px;color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums}
.dx-steps button i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.dx-steps button:hover{color:var(--ink);border-color:var(--line-3)}
.dx-steps button[aria-current="step"]{color:var(--ink);background:#fff;border-color:var(--peach-200);box-shadow:var(--sh-1)}
.dx-steps button[aria-current="step"] b{background:var(--grad-cta);color:#fff}
.dx-steps button.is-done b{background:var(--ok-bg);color:var(--ok)}
.dx-play{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);cursor:pointer}
.dx-play svg{width:15px;height:15px}
.dx-play .i-play{display:none}
.dx-play[aria-pressed="true"] .i-pause{display:none}
.dx-play[aria-pressed="true"] .i-play{display:block}

/* Ventana */
.dx-stage{position:relative}
.dx-win{position:relative;border-radius:22px;background:var(--dx-canvas);border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden;isolation:isolate}
.dx-bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:rgba(255,255,255,.75);border-bottom:1px solid var(--dx-line)}
.dx-bar .dots{display:flex;gap:6px}
.dx-bar .dots i{width:10px;height:10px;border-radius:50%;background:#f0d9cc}
.dx-bar .dots i:nth-child(2){background:#f5e6c8}.dx-bar .dots i:nth-child(3){background:#d9ecd9}
.dx-url{flex:1;max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 12px;border-radius:99px;background:var(--dx-canvas);font-size:11.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden}
.dx-url svg{width:12px;height:12px;flex:none}
.dx-url b{font-weight:500;color:var(--dx-ink-2);overflow:hidden;text-overflow:ellipsis}
.dx-who{display:flex;align-items:center;gap:8px}
.dx-av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f9bba7,#ef8c6d);color:#fff;font-size:10.5px;font-weight:700;flex:none}
.dx-av.b{background:linear-gradient(135deg,#9aa6ff,#3b46a8)}.dx-av.g{background:linear-gradient(135deg,#7ad7a3,#137a46)}.dx-av.n{background:linear-gradient(135deg,#2c3354,#00062a)}

.dx-app{display:grid;grid-template-columns:78px minmax(0,1fr);height:var(--dx-h,560px)}
.dx-side{display:flex;flex-direction:column;align-items:center;gap:4px;margin:10px 0 10px 10px;padding:12px 6px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(18,22,51,.05),0 12px 30px -18px rgba(179,61,24,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dx-logo{font-size:24px;font-weight:700;font-style:italic;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;line-height:1}
.dx-nav{display:grid;justify-items:center;gap:3px;width:100%;padding:7px 2px;border-radius:13px;font-size:9.5px;font-weight:500;color:var(--dx-ink-3);transition:background .3s,color .3s}
.dx-nav svg{width:18px;height:18px}
.dx-nav.is-on{background:var(--grad-cta);color:#fff;box-shadow:0 8px 16px -10px rgba(230,27,87,.7)}
.dx-main{position:relative;display:grid;min-width:0;min-height:0;padding:16px 18px 18px;overflow:hidden;scrollbar-width:none}
/* el motor desplaza la pantalla solo; con la demo en pausa, el visitante puede recorrerla */
.dx:has(.dx-play[aria-pressed="true"]) .dx-main{overflow-y:auto;overscroll-behavior:contain}
.dx-main::-webkit-scrollbar{display:none}
/* Cambio de pantalla en dos tiempos (fade through): la que sale se va en .15s y la nueva entra después, así nunca se ven
   dos capas encimadas. La que sale deja de ocupar alto al terminar su salida (max-height numérico para que el cambio
   respete el retardo): el alto desplazable de .dx-main es el de la pantalla visible y no el de la más alta. */
.dx-screen{grid-area:1/1;display:grid;gap:14px;align-content:start;min-width:0;max-height:6000px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s ease-out,transform .15s ease-out,visibility 0s .15s,max-height 0s .15s}
.dx-screen:not(.is-on){max-height:0;overflow:hidden;overflow:clip}   /* clip: recorta sin volverla contenedor de desplazamiento */
.dx-screen.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .36s var(--ease) .14s,transform .48s var(--ease) .14s,visibility 0s,max-height 0s}
.dx-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* título de la pantalla: .dx-ttl (no es un encabezado de la página; h4 se conserva por compatibilidad) */
.dx-head .dx-ttl,.dx-head h4{margin:0;font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.12;text-wrap:balance;color:var(--dx-ink)}
.dx-head p{margin:0;font-size:12.5px;color:var(--dx-ink-3)}
.dx-head .sp{flex:1}

/* Piezas */
.dx-card{min-width:0;padding:14px;border-radius:var(--dx-r);background:var(--dx-card);border:1px solid var(--dx-line);box-shadow:0 1px 2px rgba(18,22,51,.04)}
.dx-card h5,.dx-card .dx-h5{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--dx-ink)}
.dx-grid{display:grid;gap:12px;min-width:0}
.dx-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.dx-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.dx-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dx-kpi{display:grid;gap:2px;padding:12px 14px;border-radius:var(--dx-r);background:var(--dx-card);border:1px solid var(--dx-line)}
.dx-kpi > span{font-size:11.5px;color:var(--dx-ink-3)}
.dx-kpi b{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--dx-ink);font-variant-numeric:tabular-nums}
.dx-kpi em{font-style:normal;font-size:11.5px;font-weight:600}
.dx-kpi em.up{color:var(--dx-ok)}.dx-kpi em.down{color:var(--dx-bad)}
.dx-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap;background:var(--bg-2);color:var(--dx-ink-2)}
.dx-tag svg{width:12px;height:12px}
.dx-tag.ok{background:var(--dx-ok-bg);color:var(--dx-ok)}.dx-tag.warn{background:var(--dx-warn-bg);color:var(--dx-warn)}
.dx-tag.info{background:var(--dx-info-bg);color:var(--dx-info)}.dx-tag.ai{background:var(--dx-peach);color:var(--dx-acc-ink)}
/* sobre el lienzo crema el fondo durazno casi no se distingue: un filo de la marca lo deja leer como píldora */
.dx-head .dx-tag.ai{box-shadow:inset 0 0 0 1px var(--peach-200)}
.dx-tag.bad{background:var(--dx-bad-bg);color:var(--dx-bad)}.dx-tag.dark{background:var(--dx-ink);color:#fff}
.dx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--dx-line-2);background:#fff;font-size:12px;font-weight:600;color:var(--dx-ink);white-space:nowrap;cursor:default;transition:transform .15s,box-shadow .25s,background-color .25s}
.dx-btn svg{width:14px;height:14px}
.dx-btn.pri{border:0;background:var(--grad-cta);color:#fff;box-shadow:0 8px 16px -10px rgba(230,27,87,.7)}
.dx-btn.dark{border:0;background:var(--dx-ink);color:#fff}
.dx-btn.okb{border:0;background:var(--dx-ok);color:#fff}
.is-pressed{transform:scale(.95)!important}
.dx-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--dx-peach);color:var(--dx-acc-ink);flex:none}
.dx-ic svg{width:16px;height:16px}
.dx-ic.ok{background:var(--dx-ok-bg);color:var(--dx-ok)}.dx-ic.info{background:var(--dx-info-bg);color:var(--dx-info)}.dx-ic.warn{background:var(--dx-warn-bg);color:var(--dx-warn)}
/* modos de una regla: «Lo hace sola» = .dx-ic (durazno), «Te pide aprobación» = .warn (ámbar), «Pasa a una persona» = .dark (tinta) */
.dx-ic.dark{background:var(--dx-ink);color:#fff}
.dx-row{display:flex;align-items:center;gap:10px;min-width:0}
.dx-row > .sp{flex:1}
.dx-muted{color:var(--dx-ink-3)}
.dx-num{font-variant-numeric:tabular-nums}
.dx-line{height:8px;border-radius:9px;background:var(--dx-line)}

/* Tabla */
.dx-table{display:grid;min-width:0;border-radius:var(--dx-r);background:#fff;border:1px solid var(--dx-line);overflow:hidden}
.dx-tr{display:grid;grid-template-columns:var(--cols);align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-top:1px solid var(--dx-line);font-size:12.5px;transition:background-color .4s}
.dx-tr:first-child{border-top:0}
.dx-tr.th{min-height:32px;background:var(--dx-canvas);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dx-ink-3)}
.dx-tr > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-tr.is-hot{background:var(--dx-peach)}
.dx-tr.is-ok{background:var(--dx-ok-bg)}
.dx-tr.is-new{animation:dxNew .6s var(--ease) both}
@keyframes dxNew{from{opacity:0;transform:translateY(-6px);background:var(--dx-peach-2)}to{opacity:1;transform:none}}

/* Kanban */
.dx-kanban{display:grid;grid-template-columns:repeat(var(--n,4),minmax(150px,1fr));gap:10px;min-width:0;overflow-x:auto;padding-bottom:2px}
.dx-col{display:grid;gap:8px;align-content:start;min-height:200px;padding:10px;border-radius:var(--dx-r);background:rgba(255,255,255,.55);border:1px dashed var(--dx-line-2)}
.dx-col > p{display:flex;align-items:center;justify-content:space-between;margin:0 0 2px;font-size:11.5px;font-weight:600;color:var(--dx-ink-3)}
.dx-item{display:grid;gap:6px;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--dx-line);box-shadow:0 1px 2px rgba(18,22,51,.05);font-size:12px}
.dx-item b{font-size:12.8px;color:var(--dx-ink)}
.dx-item.is-hot{border-color:var(--peach-200);box-shadow:0 0 0 3px rgba(229,97,45,.14)}

/* Chat (WhatsApp) y teléfono flotante */
.dx-chat{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background-color:#efeae2;background-image:radial-gradient(rgba(120,100,80,.07) 1px,transparent 1.2px);background-size:14px 14px;overflow:hidden}
.dx-msg{max-width:86%;padding:6px 9px 7px;border-radius:9px;font-size:12.3px;line-height:1.38;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.dx-msg.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.dx-msg.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.dx-msg.sys{align-self:center;max-width:94%;background:#fff6d8;color:#5c4a00;font-size:11px;box-shadow:none}
.dx-msg.is-in{animation:dxMsg .4s var(--ease) both}
@keyframes dxMsg{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.dx-msg small{display:block;margin-top:2px;font-size:10px;color:#667781;text-align:right}
.dx-typing{display:inline-flex;gap:4px;padding:9px 11px;border-radius:9px;background:#fff;align-self:flex-start}
.dx-typing.out{align-self:flex-end;background:#d9fdd3}
.dx-typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:blink 1.2s infinite}
.dx-typing i:nth-child(2){animation-delay:.18s}.dx-typing i:nth-child(3){animation-delay:.36s}
.dx-phone{position:absolute;right:18px;bottom:18px;z-index:4;display:flex;flex-direction:column;width:240px;height:400px;padding:7px;border-radius:30px;background:linear-gradient(145deg,#1b2050,#05082a 60%);box-shadow:var(--sh-3);transition:transform .55s var(--spring),opacity .4s}
.dx-phone.is-off{opacity:0;transform:translateY(30px) scale(.94);pointer-events:none}
.dx-phone-in{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:24px;overflow:hidden;background:#efeae2}
.dx-phone-top{display:flex;align-items:center;gap:8px;padding:22px 10px 8px;background:#075e54;color:#fff;font-size:12px}
.dx-phone-top b{display:block;font-size:12.5px;color:#fff}
.dx-phone-top > span:last-child > span{display:block;font-size:10px;color:#cfe9e4}
.dx-phone .dx-chat{flex:1;border-radius:0;justify-content:flex-end}

/* Documento (PDF, factura, contrato) con campos resaltados */
.dx-doc{position:relative;display:grid;gap:8px;padding:16px;border-radius:10px;background:#fff;border:1px solid var(--dx-line);box-shadow:0 14px 30px -20px rgba(0,6,42,.35);font-size:11.5px}
.dx-doc .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--dx-line)}
.dx-doc .hd b{font-size:13px;color:var(--dx-ink)}
.dx-field{position:relative;display:flex;justify-content:space-between;gap:10px;padding:3px 6px;border-radius:6px;transition:background-color .4s,box-shadow .4s}
.dx-field span{color:var(--dx-ink-3)}
.dx-field b{color:var(--dx-ink);font-weight:600;font-variant-numeric:tabular-nums}
.dx-field.is-in{background:var(--dx-peach);box-shadow:0 0 0 1.5px var(--peach-200)}
.dx-scan{position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(180deg,rgba(229,97,45,0),rgba(229,97,45,.18),rgba(229,97,45,0));opacity:0;pointer-events:none}
.dx-scan.is-in{animation:dxScan 1.6s var(--ease-io) both}
@keyframes dxScan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(var(--h,260px))}}

/* Sugerencia de la IA (propone; una persona decide) */
.dx-ai{position:relative;display:grid;gap:8px;padding:12px 14px;border-radius:var(--dx-r);background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 12px 26px -18px rgba(230,27,87,.55)}
.dx-ai .who{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dx-acc-ink)}
.dx-ai .who svg{width:14px;height:14px}
.dx-ai p{margin:0;font-size:12.5px;color:var(--dx-ink)}
.dx-ai .acts{display:flex;flex-wrap:wrap;gap:6px}
.dx-ai.is-ok{background:linear-gradient(var(--dx-ok-bg),var(--dx-ok-bg)) padding-box,linear-gradient(var(--dx-ok),var(--dx-ok)) border-box;box-shadow:none}

/* Línea de tiempo y barras de progreso */
.dx-tl{display:grid;gap:0;list-style:none;margin:0;padding:0}
.dx-tl li{position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding-bottom:12px;font-size:12.3px}
.dx-tl li::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--dx-line-2)}
.dx-tl li:last-child::before{display:none}
.dx-tl li i{width:22px;height:22px;border-radius:50%;border:2px solid var(--dx-line-2);background:#fff;z-index:1;transition:all .35s}
.dx-tl li.is-done i{border-color:var(--dx-ok);background:var(--dx-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.dx-tl li.is-now i{border-color:var(--dx-acc);box-shadow:0 0 0 4px rgba(229,97,45,.18)}
.dx-tl b{display:block;color:var(--dx-ink)}
.dx-bar-p{height:8px;border-radius:9px;background:var(--dx-line);overflow:hidden}
.dx-bar-p i{display:block;height:100%;width:calc(var(--p,0) * 1%);border-radius:inherit;background:var(--grad);transition:width .9s var(--ease)}

/* Gráficas (SVG): barras durazno, líneas magenta */
.dx-chart{width:100%;height:auto;display:block}
.dx-chart .bar{fill:var(--peach-300);transform-origin:bottom;transform-box:fill-box;transition:transform .8s var(--ease)}
.dx-chart .bar.hl{fill:var(--dx-acc)}
.dx-chart .ln{fill:none;stroke:var(--dx-acc);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dx-chart .ln2{fill:none;stroke:#3b46a8;stroke-width:2;stroke-dasharray:5 5}
.dx-chart .area{fill:rgba(229,97,45,.12)}
.dx-chart .grid{stroke:var(--dx-line);stroke-width:1}
.dx-chart text{font-family:var(--sans);font-size:10px;fill:var(--dx-ink-3)}
.dx-chart .lb{text-anchor:middle;font-size:9.5px}
.dx-chart .vl{text-anchor:middle;font-size:10px;font-weight:600;fill:var(--dx-ink-2,var(--dx-ink));opacity:0;transition:opacity .4s .6s}
.dx-grow.is-in .vl{opacity:1}
.dx-draw .ln{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.6s var(--ease)}
.dx-draw.is-in .ln{stroke-dashoffset:0}
.dx-grow .bar{transform:scaleY(0)}
.dx-grow.is-in .bar{transform:scaleY(1)}
.dx-grow.is-in .bar:nth-child(2){transition-delay:.05s}.dx-grow.is-in .bar:nth-child(3){transition-delay:.1s}
.dx-grow.is-in .bar:nth-child(4){transition-delay:.15s}.dx-grow.is-in .bar:nth-child(5){transition-delay:.2s}
.dx-grow.is-in .bar:nth-child(n+6){transition-delay:.25s}

/* Avisos, cursor y turno del visitante */
.dx-toasts{position:absolute;top:52px;right:14px;z-index:6;display:grid;gap:8px;justify-items:end;pointer-events:none}
.dx-toast{display:flex;align-items:center;gap:8px;max-width:300px;padding:9px 13px;border-radius:14px;background:var(--dx-ink);color:#fff;font-size:12.3px;font-weight:500;box-shadow:var(--sh-3);animation:dxToast .45s var(--spring) both}
.dx-toast.t-ok::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:#34c778 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}
.dx-toast.t-ai::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--grad-cta)}
.dx-toast.t-warn{background:#5c3a00}
.dx-toast.is-out{opacity:0;transform:translateY(-6px);transition:all .35s}
@keyframes dxToast{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
.dx-cursor{position:absolute;left:0;top:0;z-index:8;width:22px;height:22px;opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.45,.05,.25,1),opacity .3s}
.dx-cursor.is-on{opacity:1}
.dx-cursor svg{width:22px;height:22px;filter:drop-shadow(0 3px 4px rgba(0,6,42,.35))}
.dx-cursor::after{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:rgba(229,97,45,.35);transform:scale(0);opacity:0}
.dx-cursor.is-click::after{animation:dxClick .45s var(--ease) both}
@keyframes dxClick{from{transform:scale(.3);opacity:1}to{transform:scale(2.2);opacity:0}}
.dx-hint{position:relative;z-index:2;animation:dxHint 1.4s var(--ease-io) infinite;cursor:pointer!important}
.dx-hint::after{content:attr(data-hint);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:4px 9px;border-radius:99px;background:var(--dx-ink);color:#fff;font-size:10.5px;font-weight:600;white-space:nowrap;pointer-events:none}
@keyframes dxHint{0%,100%{box-shadow:0 0 0 0 rgba(229,97,45,.55)}50%{box-shadow:0 0 0 8px rgba(229,97,45,0)}}
.dx-cap{margin:0;font-size:12.5px;color:var(--ink-3);text-align:center}

/* Entradas genéricas dentro de la demo */
.dx [data-pop]{opacity:0;transform:translateY(8px) scale(.98);transition:opacity .45s var(--ease),transform .5s var(--spring)}
.dx [data-pop].is-in{opacity:1;transform:none}
.dx-fast *,.dx-fast *::before,.dx-fast *::after{transition:none!important;animation:none!important}
html:not(.js-motion) .dx *{transition:none!important;animation:none!important}
html:not(.js):not(.js-motion) .dx [data-pop]{opacity:1;transform:none}
html:not(.js):not(.js-motion) .dx-steps,html:not(.js):not(.js-motion) .dx-play{display:none}

/* Celular: el dock baja y se vuelve barra; la ventana parece la app en el teléfono */
@media (max-width:760px){
  .dx-win{border-radius:24px}
  .dx-bar{height:36px}.dx-bar .dots,.dx-who{display:none}
  .dx-app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;height:var(--dx-hm,600px)}
  .dx-side{order:2;flex-direction:row;justify-content:space-around;margin:0 8px 8px;padding:6px;border-radius:18px}
  .dx-logo{display:none}
  .dx-nav{padding:6px 2px;font-size:9px}
  .dx-main{padding:12px 12px 8px}
  .dx-head .dx-ttl,.dx-head h4{font-size:16px}
  .dx-g3,.dx-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-g2.m1{grid-template-columns:1fr}
  .dx-phone{right:10px;bottom:74px;width:208px;height:340px}
  /* en el celular el aviso baja como notificación sobre la barra de direcciones: no tapa el título de la pantalla */
  .dx-toasts{top:4px;right:10px;left:10px;justify-items:center}
  .dx-toast{max-width:100%;padding:5px 12px;border-radius:12px;font-size:11.5px;line-height:1.25}
  .dx-hide-m{display:none!important}
}
/* hidden siempre gana dentro de las demos, aunque el elemento tenga su propio display */
.dx [hidden]{display:none!important}

/* Sin movimiento (reducido o sin JS): la ventana crece para mostrar completa la pantalla final, y solo esa */
html:not(.js-motion) .dx-screen:not(.is-on){display:none}
html:not(.js-motion) .dx-app{height:auto;min-height:var(--dx-h,560px)}
@media (max-width:760px){html:not(.js-motion) .dx-app{min-height:var(--dx-hm,600px)}}