/* ==========================================================================
   PAKTAI · demos en el diseño nuevo
   Se carga después de paktai.css y usa sus tokens (papel, tinta, violeta, radios).
   Todas las clases empiezan con "dm-" para no chocar con las del sitio.
   ========================================================================== */

/* ---------- Encabezado de cada demo ---------- */
.phero.dm-phero{padding:clamp(104px,14vh,136px) 0 clamp(20px,3vw,36px)}
.dm-phero .phero__grid{align-items:end}
.dm-phero .h1--md{max-width:18ch}
.dm-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:clamp(20px,3.2vw,36px)}
.dm-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 14px;border-radius:999px;color:var(--ink);font-weight:500;font-size:.92rem;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color .2s var(--ease-out),transform .16s var(--ease-out),box-shadow .2s var(--ease-out)}
.dm-back .ico{font-size:14px;transform:scaleX(-1);transition:transform .3s var(--ease-out)}
.dm-back:active{transform:scale(.97)}
.dm-tabs{display:flex;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dm-tabs::-webkit-scrollbar{display:none}
.dm-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:.88rem;font-weight:450;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.dm-tabs a[aria-current="page"]{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .dm-back:hover{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--ink-3)}
  .dm-back:hover .ico{transform:scaleX(-1) translateX(3px)}
  .dm-tabs a:not([aria-current="page"]):hover{background:rgba(22,18,44,.06);color:var(--ink)}
}
@media (max-width:520px){
  .dm-tabs{width:100%}
  .dm-tabs a{flex:1 1 0;justify-content:center;padding:0 8px;font-size:.84rem}
}
.dm-tag{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;border-radius:999px;background:var(--accent-wash);color:var(--accent-hi);font:500 .78rem/1 var(--font-mono);letter-spacing:.01em;margin-bottom:clamp(14px,2vw,22px)}
.dm-tag::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dm-src{display:grid;gap:6px;color:var(--ink-2);font-size:.92rem;line-height:1.5;padding-left:16px;border-left:2px solid var(--line-strong)}
.dm-src b{font-weight:500;color:var(--ink)}

/* ---------- Bloques generales ---------- */
.dm-main{display:grid;gap:clamp(14px,2vw,22px)}
.dm-sec{padding-block:clamp(12px,2vw,24px) clamp(44px,6vw,88px)}
.dm-card{display:grid;gap:18px;align-content:start;padding:clamp(18px,2.6vw,30px);border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dm-card__head{display:grid;gap:14px}
.dm-card__t{display:grid;gap:6px}
.dm-card h2{font:600 clamp(1.3rem,2.2vw,1.75rem)/1.15 var(--font-display);letter-spacing:-.028em}
.dm-card h3{font:600 1.2rem/1.2 var(--font-display);letter-spacing:-.024em}
.dm-card__t p{color:var(--ink-2);font-size:.97rem;max-width:62ch}
.dm-lab{font:500 .78rem/1.2 var(--font-mono);color:var(--accent);letter-spacing:.01em}
.dm-note{color:var(--ink-3);font-size:.85rem;line-height:1.5;max-width:70ch}
.dm-grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(14px,2vw,22px);align-items:start}
.dm-grid2--eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.dm-stack{display:grid;gap:clamp(14px,2vw,22px)}
@media (max-width:980px){.dm-grid2,.dm-grid2--eq{grid-template-columns:1fr}}

/* ---------- Controles ---------- */
.dm-ctl{display:grid;gap:16px;padding:clamp(16px,2.4vw,24px);border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dm-ctl__t{font:500 .78rem/1.2 var(--font-mono);color:var(--ink-3)}
.dm-ctl__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px 18px;align-items:end}
.dm-f{display:grid;gap:8px;min-width:0}
.dm-f label,.dm-f .dm-f__l{font-size:.84rem;font-weight:500;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px}
.dm-f output{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.dm-f select,.dm-f input[type=number]{width:100%;height:50px;padding:0 14px;border:0;border-radius:var(--r-m);background-color:var(--paper);color:var(--ink);font-size:1rem;
  box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .2s var(--ease-out),background-color .2s var(--ease-out)}
.dm-f select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6783' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.dm-f input[type=number]{font-variant-numeric:tabular-nums}
.dm-f select:focus-visible,.dm-f input:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
@media (hover:hover) and (pointer:fine){.dm-f select:hover,.dm-f input[type=number]:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}}
.dm-f input[type=range]{width:100%;height:44px;margin:0;background:transparent;accent-color:var(--accent);cursor:pointer}
.dm-f small{color:var(--ink-3);font-size:.8rem;line-height:1.4}
.dm-ctl__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.dm-ctl__go p{color:var(--ink-2);font-size:.9rem;line-height:1.5;flex:1 1 260px;max-width:70ch}

/* ---------- Cifras clave ---------- */
.dm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dm-kpi{display:grid;align-content:start;gap:10px;padding:clamp(16px,2vw,22px);border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dm-kpi__l{font-size:.84rem;line-height:1.3;color:var(--ink-3);font-weight:500}
.dm-kpi strong{display:block;font:600 clamp(1.6rem,3vw,2.4rem)/1 var(--font-display);letter-spacing:-.034em;overflow-wrap:anywhere}
.dm-kpi__s{font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.dm-kpi__d{font:500 .78rem/1.3 var(--font-mono);color:var(--ink-3)}
@media (max-width:980px){.dm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.dm-kpis{gap:10px}.dm-kpi{padding:14px}.dm-kpi strong{font-size:1.5rem}.dm-kpi__s{font-size:.8rem}}

/* ---------- Botones de opción (cambiar de indicador, filtrar) ---------- */
.dm-seg{display:flex;flex-wrap:wrap;gap:6px}
.dm-chip{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-size:.9rem;font-weight:450;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out),box-shadow .2s var(--ease-out)}
.dm-chip:active{transform:scale(.97)}
.dm-chip[aria-pressed="true"]{background:var(--accent);color:#fff;box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .dm-chip[aria-pressed="false"]:hover{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
  .dm-chip[aria-pressed="true"]:hover{background:var(--accent-hi)}
}

/* ---------- Gráficos ---------- */
.dm-plot{position:relative;min-width:0;--c-line:var(--accent);--c-grid:rgba(22,18,44,.08);--c-axis:var(--line-strong);--c-tx:var(--ink-3);--c-ring:var(--surface)}
.dm-plot svg{width:100%;height:auto;overflow:visible;touch-action:pan-y;-webkit-tap-highlight-color:transparent;border-radius:var(--r-m)}
.dm-plot svg:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.dm-grid{stroke:var(--c-grid);stroke-width:1;shape-rendering:crispEdges}
.dm-zero{stroke:var(--c-axis);stroke-width:1;shape-rendering:crispEdges}
.dm-ref{stroke:var(--ink-3);stroke-width:1;shape-rendering:crispEdges;opacity:.7}
.dm-tx{fill:var(--c-tx);font:400 12px var(--font-sans);letter-spacing:0;font-variant-numeric:tabular-nums}
.dm-cap{fill:var(--c-tx);font:500 12px var(--font-sans);letter-spacing:0}
.dm-val{fill:var(--ink);font:600 12.5px var(--font-sans);letter-spacing:0;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.dm-val--s{font-weight:500;font-size:11.5px;fill:var(--ink-3)}
.dm-ln{fill:none;stroke:var(--c-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dm-wash{fill:var(--c-line);fill-opacity:.1}
.dm-band--o{fill:var(--c-line);fill-opacity:.12}
.dm-band--i{fill:var(--c-line);fill-opacity:.26}
.dm-pt{fill:var(--c-line);stroke:var(--c-ring);stroke-width:2}
.dm-pt--hot{fill:var(--c-line);stroke:var(--c-ring);stroke-width:2.5}
.dm-cross{stroke:var(--ink-3);stroke-width:1;shape-rendering:crispEdges}
.dm-plot svg.is-anim .dm-ln{stroke-dasharray:1;animation:dm-draw 1s var(--ease-out) both}
.dm-plot svg.is-anim .dm-wash,.dm-plot svg.is-anim .dm-band{animation:dm-fade .8s var(--ease-out) .15s both}
.dm-plot svg.is-anim .dm-pt{animation:dm-fade .5s var(--ease-out) .5s both}
@keyframes dm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dm-fade{from{opacity:0}}

.dm-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;min-width:150px;max-width:260px;padding:10px 12px;border-radius:var(--r-m);background:var(--ink);color:var(--paper);
  box-shadow:0 14px 30px -12px rgba(22,18,44,.5);opacity:0;transition:opacity .15s var(--ease-out)}
.dm-tip.is-on{opacity:1}
.dm-tip__t{font:500 .78rem/1 var(--font-mono);color:#cfc9ea;margin-bottom:8px}
.dm-tip__r{display:flex;align-items:baseline;gap:8px;line-height:1.35;font-size:.82rem;color:#cfc9ea}
.dm-tip__r+.dm-tip__r{margin-top:4px}
.dm-tip__r b{font-weight:600;font-size:.95rem;color:#fff;font-variant-numeric:tabular-nums}
.dm-key{flex:none;align-self:center;width:12px;height:3px;border-radius:2px;background:var(--hi)}
.dm-key--o{opacity:.55}
.dm-key--n{background:#8f8aab}

.dm-leg{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-2);font-size:.85rem}
.dm-leg span{display:inline-flex;align-items:center;gap:8px}
.dm-leg i{flex:none;width:16px;height:10px;border-radius:3px;background:var(--accent)}
.dm-leg .dm-leg__o{background:color-mix(in oklab,var(--accent) 14%,var(--surface))}
.dm-leg .dm-leg__i{background:color-mix(in oklab,var(--accent) 32%,var(--surface))}
.dm-leg .dm-leg__m{height:3px;border-radius:2px}

/* barras */
.dm-cols{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(6px,2vw,14px);padding-top:6px;border-bottom:1px solid var(--line-strong)}
.dm-col{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;outline-offset:2px;border-radius:6px;cursor:default}
.dm-col__v{font:600 .82rem/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.dm-col__bar{display:block;width:min(100%,32px);border-radius:4px 4px 0 0;background:var(--accent);transform-origin:bottom;animation:dm-grow .7s var(--ease-out) both;transition:opacity .2s var(--ease-out)}
.dm-col--base .dm-col__bar{background:var(--ink-3)}
.dm-col__l{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;font:400 .78rem/1 var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.dm-cols{margin-bottom:34px}
@media (hover:hover) and (pointer:fine){.dm-cols:hover .dm-col:not(:hover) .dm-col__bar{opacity:.55}}
@keyframes dm-grow{from{transform:scaleY(0)}}

/* tabla */
.dm-tbl summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-weight:500;font-size:.9rem;color:var(--accent);-webkit-user-select:none;user-select:none}
.dm-tbl summary::-webkit-details-marker{display:none}
.dm-tbl summary::before{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--ease-out)}
.dm-tbl[open] summary::before{transform:rotate(45deg)}
.dm-tw{overflow-x:auto;margin-top:6px}
.dm-t{width:100%;border-collapse:collapse;font-size:.92rem}
.dm-t th,.dm-t td{padding:11px 12px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
.dm-t th:first-child,.dm-t td:first-child{text-align:left}
.dm-t thead th{border-top:0;border-bottom:1px solid var(--line-strong);color:var(--ink-3);font:500 .78rem/1.3 var(--font-mono);vertical-align:bottom}
.dm-t td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.dm-t td:first-child{color:var(--ink);font-weight:500}
.dm-t tr.is-sel td{background:var(--accent-wash);color:var(--ink)}
.dm-t tr.is-sel td:first-child{border-radius:10px 0 0 10px}
.dm-t tr.is-sel td:last-child{border-radius:0 10px 10px 0}
.dm-pick{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:500;cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.28em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.dm-pick:hover{color:var(--accent);text-decoration-color:var(--accent)}}

/* lectura rápida y textos de apoyo */
.dm-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.dm-read .col{padding-top:22px}
.dm-read h3{font:600 clamp(1.25rem,1.9vw,1.55rem)/1.15 var(--font-display);letter-spacing:-.026em}
.dm-read p{color:var(--ink-2);font-size:1rem;line-height:1.55}
@media (max-width:820px){.dm-read{grid-template-columns:1fr;gap:28px}}
.dm-quick{margin:0}
.dm-quick b{font-weight:600}
.dm-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--line-strong)}
.dm-more>span{font:500 .78rem/1 var(--font-mono);color:var(--ink-3)}
.dm-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,4vw,48px)}
.dm-svc>div{padding-top:18px;border-top:1px solid var(--line-strong)}
.dm-svc h3{font:500 1.05rem/1.3 var(--font-sans);margin-bottom:6px}
.dm-svc p{color:var(--ink-2);font-size:.95rem}
@media (max-width:820px){.dm-svc{grid-template-columns:1fr}}
.dm-steps .step__h h3{font-size:1.3rem}

/* ---------- Flujos de servicio ---------- */
.dm-flows{display:grid;gap:clamp(14px,2vw,20px)}
.dm-flow{display:grid;gap:clamp(18px,2.4vw,28px);padding:clamp(20px,3vw,34px);border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dm-flow__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 28px;align-items:end}
.dm-flow__t{display:grid;gap:8px}
.dm-flow h3{font:600 clamp(1.4rem,2.4vw,1.9rem)/1.1 var(--font-display);letter-spacing:-.03em}
.dm-flow__p{color:var(--ink-2);max-width:60ch}
.dm-flow__go{display:flex;flex-wrap:wrap;gap:8px 12px}
.dm-flow ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px;counter-reset:s}
.dm-flow li{position:relative;padding-top:30px;font-size:.93rem;line-height:1.4;color:var(--ink)}
.dm-flow li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.dm-flow li::after{content:"";position:absolute;left:18px;right:-14px;top:12px;height:1px;background:var(--line-strong)}
.dm-flow li:last-child::after{display:none}
.dm-flow li b{display:block;margin-bottom:4px;font:500 .78rem/1 var(--font-mono);color:var(--accent)}
@media (max-width:1020px){
  .dm-flow ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .dm-flow li:nth-child(3)::after{display:none}
}
@media (max-width:640px){
  .dm-flow__head{grid-template-columns:1fr}
  .dm-flow ol{grid-template-columns:1fr;row-gap:0}
  .dm-flow li{padding:0 0 18px 30px;min-height:44px}
  .dm-flow li::before{top:3px}
  .dm-flow li::after{display:block;left:4.5px;right:auto;top:18px;bottom:0;width:1px;height:auto}
  .dm-flow li:nth-child(3)::after{display:block}
  .dm-flow li:last-child{padding-bottom:0}
  .dm-flow li:last-child::after{display:none}
}
.dm-count{font-size:.9rem;color:var(--ink-3)}
.dm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(14px,2vw,22px)}

/* ---------- Portada de los demos ---------- */
.dm-big-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:860px){.dm-big-grid{grid-template-columns:1fr}}
.dm-big{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:28px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:clip;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.dm-big__art{display:grid;place-items:center;aspect-ratio:16/7;padding:clamp(14px,2vw,24px);background:var(--lav)}
.dm-big:nth-child(2) .dm-big__art{background:var(--sand)}
.dm-big:nth-child(3) .dm-big__art{background:var(--accent-wash)}
.dm-big:nth-child(4) .dm-big__art{background:var(--paper-2)}
.dm-big__art svg{width:100%;height:100%;max-height:170px;overflow:visible}
.dm-big__body{display:grid;gap:18px;align-content:start;padding:clamp(20px,3vw,34px)}
.dm-big__top{display:grid;gap:12px}
.dm-big h2{font:600 clamp(1.7rem,2.8vw,2.3rem)/1.05 var(--font-display);letter-spacing:-.034em}
.dm-big dl{display:grid;gap:14px;margin:0}
.dm-big dt{font:500 .78rem/1 var(--font-mono);color:var(--accent);margin-bottom:6px}
.dm-big dd{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.dm-big .btn{position:static;justify-self:start;margin-top:6px}
.dm-big .btn::after{content:"";position:absolute;inset:0;border-radius:28px}
.dm-big .btn:focus-visible{outline:0}
.dm-big:has(.btn:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .dm-big:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-strong),0 28px 50px -30px rgba(40,24,110,.35)}
  .dm-big:hover .btn{background:var(--accent)}
  .dm-big:hover .btn__ico{transform:translate(2px,-1px)}
}
.dm-art-g{stroke:var(--ink);stroke-opacity:.1;stroke-width:1;shape-rendering:crispEdges}
.dm-art-ln{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dm-art-w{fill:var(--accent);fill-opacity:.12}
.dm-art-w2{fill:var(--accent);fill-opacity:.26}
.dm-art-d{fill:var(--accent);stroke:var(--surface);stroke-width:3}
.dm-art-b{fill:var(--accent)}
.dm-art-b0{fill:var(--ink-3)}
.dm-art-t{fill:var(--ink-2);font:500 11px var(--font-mono)}
.dm-art-c{fill:var(--surface);stroke:var(--accent);stroke-width:2.5}
.dm-art-c1{fill:var(--accent)}
.is-in .dm-art-ln,.dm-big.is-in .dm-art-ln{stroke-dasharray:1;animation:dm-draw 1.2s var(--ease-out) .2s both}
.dm-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(28px,4vw,56px)}
.dm-intro>div{padding-top:16px;border-top:1px solid var(--line-strong)}
.dm-intro h3{font:500 1.02rem/1.3 var(--font-sans);margin-bottom:6px}
.dm-intro p{color:var(--ink-2);font-size:.95rem}
@media (max-width:820px){.dm-intro{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .dm-plot svg.is-anim .dm-ln,.dm-plot svg.is-anim .dm-wash,.dm-plot svg.is-anim .dm-band,.dm-plot svg.is-anim .dm-pt,.dm-col__bar{animation:none}
  .dm-plot svg.is-anim .dm-ln{stroke-dasharray:none}
}
@media print{.dm-top,.dm-ctl{display:none}}