/* Demos de las notas del blog (views/demos.js · assets/js/notas.js). Solo se carga en notas que tienen
   alguna. Fondo claro: tinta sobre papel, un solo matiz; lo elegido o lo activo es la tinta llena.
   Sin JS (o hasta que notas.js pone .demo--viva) se ve el estado inicial y los controles se ocultan. */

.demo{margin:2.4em 0;padding:clamp(18px,4.2vw,30px);color:var(--fg);font-size:16px;line-height:1.5}
.demo>*+*{margin-top:22px}
.demo ol{padding-left:0;list-style:none}
.demo:not(.demo--viva) [data-solo-viva]{display:none}
.demo--viva [data-sin-js]{display:none}
.demo__ceja{display:flex;align-items:center;gap:9px;font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.demo__punto{flex:none;width:7px;height:7px;border-radius:50%;background:var(--fg)}
.demo__k{font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.demo__nota{font-size:13.5px;line-height:1.5;color:var(--fg-3)}
.demo__ejemplo{font-size:15px;color:var(--fg-2)}
.demo__ejemplo strong{color:var(--fg)}

/* ── Calculadora · ElasticSlider ─────────────────────────────────────────── */
.costo__ctl{display:grid;gap:24px}
.desliz{position:relative;display:grid;gap:12px}
.desliz__fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.desliz__l{font-size:15px;font-weight:550;color:var(--fg-2)}
.desliz__v{font:650 15px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--fg)}
.desliz__pista{position:relative;display:block;height:12px;border-radius:var(--r-pill);background:rgba(10,10,10,.09);
  overflow:hidden;transition:scale .5s var(--ease-pop)}
.desliz__lleno{position:absolute;inset:0;background:var(--ink);clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0 round var(--r-pill))}
.desliz__in{position:absolute;left:0;right:0;bottom:-11px;width:100%;height:34px;margin:0;opacity:0;cursor:grab}
.desliz.is-tirando .desliz__in{cursor:grabbing}
.desliz:has(.desliz__in:focus-visible) .desliz__pista{outline:2px solid var(--ink);outline-offset:4px}
@media (hover:hover) and (pointer:fine){ .desliz:hover .desliz__pista{scale:1 1.4} }
.desliz.is-tirando .desliz__pista{scale:1 1.4}
.costo__res{padding-top:22px;border-top:1px solid var(--line)}
.costo__total{margin-top:8px;font:700 clamp(36px,7vw,56px)/1.05 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--fg)}
.costo__sub{margin-top:8px;font-size:15px;color:var(--fg-2)}
.costo__sub--fuerte{margin-top:4px;color:var(--fg);font-weight:600}

/* ── Temperatura · DetentDial ────────────────────────────────────────────── */
.temp__frase{font:650 clamp(19px,2.6vw,23px)/1.4 var(--font);letter-spacing:-.02em;color:var(--fg)}
.temp__hueco{display:inline-block;padding:0 .32em;border-radius:9px;background:var(--ink);color:var(--paper)}
.temp__hueco.is-nuevo{animation:hueco .55s var(--ease)}
@keyframes hueco{from{opacity:0;transform:translateY(.3em)}}
.temp__grid{display:grid;gap:26px;align-items:center}
@media (min-width:620px){ .temp__grid{grid-template-columns:200px minmax(0,1fr);gap:34px} }
.perilla{position:relative;width:200px;height:200px;margin:0 auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.perilla.is-girando{cursor:grabbing}
.perilla__marcas{position:absolute;inset:0;width:100%;height:100%;stroke:rgba(10,10,10,.16);stroke-width:2.4;stroke-linecap:round}
.perilla__marcas .on{stroke:var(--ink)}
.perilla__boton{position:absolute;inset:36px;border-radius:50%;transform:rotate(var(--giro));
  background:linear-gradient(160deg,#fff,#e9e9e9);
  box-shadow:0 1px 0 #fff inset,0 -2px 6px rgba(10,10,10,.06) inset,0 0 0 1px rgba(10,10,10,.08),0 18px 34px -14px rgba(10,10,10,.42)}
.perilla__aguja{position:absolute;left:50%;top:9px;width:4px;height:17px;margin-left:-2px;border-radius:2px;background:var(--ink)}
.perilla__lectura{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:5px;pointer-events:none}
.perilla__v{font:700 30px/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.perilla__l{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.perilla__in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.perilla:has(.perilla__in:focus-visible) .perilla__boton{outline:2px solid var(--ink);outline-offset:5px}
.barras{display:grid;gap:10px}
.barras__fila{display:grid;grid-template-columns:minmax(0,8.6em) minmax(0,1fr) 3.1em;align-items:center;gap:12px;font-size:14.5px}
.barras__w{overflow:hidden;font-weight:550;white-space:nowrap;text-overflow:ellipsis;color:var(--fg)}
.barras__pista{height:8px;overflow:hidden;border-radius:var(--r-pill);background:rgba(10,10,10,.07)}
.barras__f{display:block;height:100%;border-radius:inherit;background:var(--ink);transform:scaleX(var(--p));transform-origin:left;transition:transform .5s var(--ease)}
.barras__n{font:500 13px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--fg-2)}
.temp__acc{display:grid;justify-items:start;gap:14px}
.temp__salidas{display:flex;flex-wrap:wrap;gap:8px}
.temp__salidas:empty{display:none}
.temp__salidas li{padding:7px 12px;border-radius:var(--r-pill);background:var(--glass);font-size:14.5px;font-weight:550;animation:salida .5s var(--ease) both}
.temp__salidas li.is-rara{background:transparent;box-shadow:0 0 0 1.5px var(--ink) inset}
@keyframes salida{from{opacity:0;transform:translateY(8px) scale(.96)}}

/* ── Tokens · TrueFocus ──────────────────────────────────────────────────── */
.tok__campo{display:grid;gap:8px}
.tok__in{width:100%;min-height:78px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.75);font:500 16px/1.5 var(--font);color:var(--fg);resize:vertical}
.tok__in:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tokens{position:relative;display:flex;flex-wrap:wrap;gap:8px 3px;padding:8px 4px}
.tok{display:inline-block;padding:4px 7px;border-radius:7px;background:rgba(10,10,10,.06);font:500 15px/1.3 var(--mono);color:var(--fg);
  transition:filter .3s,opacity .3s}
.tok:nth-child(even){background:rgba(10,10,10,.13)}
.tok--esp{margin-left:7px}
.tokens--leyendo .tok{filter:blur(2px);opacity:.42}
.tokens--leyendo .tok.is-foco{filter:none;opacity:1}
.tokens__marco{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s}
.tokens__marco.is-on{opacity:1}
.tokens__e{position:absolute;left:0;top:0;width:10px;height:10px;border:0 solid var(--ink);border-radius:2px;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.tokens__e--tl{border-top-width:2px;border-left-width:2px}
.tokens__e--tr{border-top-width:2px;border-right-width:2px}
.tokens__e--bl{border-bottom-width:2px;border-left-width:2px}
.tokens__e--br{border-bottom-width:2px;border-right-width:2px}
.tok__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.tok__datos div{padding:12px 14px;border-radius:var(--r-sm);background:var(--glass)}
.tok__datos dt{font:500 11px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.tok__datos dd{margin-top:6px;font:700 22px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tok__acc .btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ── RAG · RubberSegment ─────────────────────────────────────────────────── */
.goma{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:4px;border-radius:var(--r-pill);
  background:rgba(10,10,10,.07);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.goma__op{height:42px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;font:600 14.5px/1 var(--font);color:var(--fg-2);
  cursor:pointer;transition:transform .16s var(--ease),color .2s}
.goma__op[aria-checked="true"]{cursor:default}
.goma__op:active{transform:scale(.96)}
.goma__op:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.goma__pulgar{position:absolute;inset:4px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);pointer-events:none;clip-path:inset(0 100% 0 0 round 999px)}
.goma__pulgar span{display:grid;place-items:center;padding:0 12px;font:600 14.5px/1 var(--font);white-space:nowrap}
.rag__q{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--fg)}
.frags{display:grid;gap:10px}
.frag{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:13px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.5);box-shadow:0 0 0 1px var(--line) inset;transition:transform .6s var(--ease),background-color .35s,box-shadow .35s}
.frag__t{font-size:14.5px;line-height:1.4;color:var(--fg-2);transition:color .35s}
.frag__m{display:flex;align-items:center;gap:10px}
.frag__barra{width:64px;height:6px;overflow:hidden;border-radius:var(--r-pill);background:rgba(10,10,10,.08)}
.frag__barra i{display:block;height:100%;background:rgba(10,10,10,.35);transform:scaleX(var(--p));transform-origin:left;transition:transform .5s var(--ease),background-color .35s}
.frag__n{font:500 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-2)}
.frag__tag{position:absolute;top:-8px;right:12px;padding:3px 8px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);
  font:500 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .4s var(--ease)}
.frag.is-top{background:#fff;box-shadow:0 0 0 1.5px var(--ink) inset}
.frag.is-top .frag__t{color:var(--fg)}
.frag.is-top .frag__barra i{background:var(--ink)}
.frag.is-top .frag__tag{opacity:1;transform:none}
.rag__resp{padding:16px 18px;border-radius:var(--r-md);background:var(--ink);color:var(--paper)}
.rag__resp .demo__k{color:rgba(250,250,250,.62)}
.rag__a{margin-top:8px;font-size:16px;line-height:1.55}
@media (max-width:480px){
  .frag{grid-template-columns:minmax(0,1fr)}
  .frag__m{justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  .demo *{transition:none !important;animation:none !important}
}