/* ============================================================
   TOKENIZACIÓN · 02-pilar (#plataforma-tokenizacion) — «Cómo funciona»
   Base (sin JS, ?reduce, ?nogl, gama baja): bloques apilados (celular) o en fila (escritorio).
   .is-pin (≥900px + WebGL, lo pone el JS): escenario fijado con diagrama 3D y panel de video.
   ============================================================ */
#plataforma-tokenizacion{
  --tkp-g1:#FFF1C9; --tkp-g2:#F4D58A; --tkp-g:#D8A646; --tkp-g3:#A77927; --tkp-g4:#6E4E17;
  --tkp-liq:linear-gradient(180deg,#FFF1C9 0%,#F4D58A 10%,#D8A646 46%,#A77927 100%);
  position:relative;overflow-x:clip;isolation:isolate;
  background:radial-gradient(90% 60% at 78% 30%,rgba(216,166,70,.07),transparent 70%),var(--ink);
}
#plataforma-tokenizacion p,#plataforma-tokenizacion h2,#plataforma-tokenizacion h3{margin:0}
#plataforma-tokenizacion .tkp-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(40% 30% at 12% 8%,rgba(244,213,138,.06),transparent 70%)}

/* ---------- Cabecera ---------- */
#plataforma-tokenizacion .tkp-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2.4vw,34px);row-gap:clamp(16px,2vw,26px);align-items:end;max-width:880px}
#plataforma-tokenizacion .tkp-num{position:relative;display:block;font:400 clamp(6.2rem,22vw,11rem)/.78 var(--serif);letter-spacing:-.05em;font-variant-numeric:lining-nums;
  padding-top:.06em;user-select:none}
#plataforma-tokenizacion .tkp-num__o{display:block;color:transparent;-webkit-text-stroke:1.4px rgba(244,213,138,.78)}
#plataforma-tokenizacion .tkp-num__f{position:absolute;inset:0;padding-top:inherit;color:transparent;
  background:linear-gradient(180deg,#FFF6DA 0%,#F4D58A 7%,#D8A646 40%,#A77927 100%) bottom/100% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;
  clip-path:inset(0 0 0 0)}                        /* lleno al 100 % (sin JS / ?reduce) */
#plataforma-tokenizacion .tkp-head__tx{padding-bottom:.35em;min-width:0}
#plataforma-tokenizacion .tkp-title{font:400 clamp(2.3rem,5.4vw,4.6rem)/1 var(--serif);letter-spacing:-.025em;color:var(--cream)}
#plataforma-tokenizacion .tkp-sub{margin-top:14px;font:400 clamp(1.08rem,1.55vw,1.4rem)/1.35 var(--serif);color:var(--cream-2)}
#plataforma-tokenizacion .tkp-sub em{font-style:italic}
#plataforma-tokenizacion .tkp-body{grid-column:1/-1;max-width:56ch;font-size:clamp(1rem,1.05vw,1.08rem)}

/* ---------- Pasos (base: tarjetas con medio) ---------- */
#plataforma-tokenizacion .tkp-flow{position:relative;margin-top:clamp(40px,6vw,80px)}
#plataforma-tokenizacion .tkp-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,34px)}
#plataforma-tokenizacion .tkp-step{padding:0;overflow:hidden;display:flex;flex-direction:column;border-color:var(--hair);outline:none}
#plataforma-tokenizacion .tkp-card__m{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);border-bottom:1px solid var(--hair)}
#plataforma-tokenizacion .tkp-card__m img,#plataforma-tokenizacion .tkp-card__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--opv,50% 50%);display:block}
#plataforma-tokenizacion .tkp-card__m img:not([src]),#plataforma-tokenizacion .tkp-layer img:not([src]){visibility:hidden}
#plataforma-tokenizacion .tkp-card__m:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,15,.5) 0%,rgba(5,9,15,0) 32%,rgba(5,9,15,0) 62%,rgba(5,9,15,.7) 100%)}
#plataforma-tokenizacion .tkp-vid{opacity:0;transition:opacity .9s var(--ease)}
#plataforma-tokenizacion .tkp-vid.is-on{opacity:1}
#plataforma-tokenizacion .tkp-big{position:absolute;left:18px;top:12px;z-index:2;font-size:clamp(4.4rem,20vw,6.4rem);line-height:1;color:transparent;
  background:var(--tkp-liq);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 18px rgba(5,9,15,.6))}

/* respaldo tinta/oro (medios aún no generados): degradado + retícula de teselas en CSS */
#plataforma-tokenizacion .tkp-fb{position:absolute;inset:0;
  background:radial-gradient(70% 55% at 60% 62%,rgba(216,166,70,.38),rgba(167,121,39,.12) 45%,transparent 75%),linear-gradient(160deg,#0D1B28 0%,#05090F 70%)}
#plataforma-tokenizacion .tkp-fb--grid:before{content:"";position:absolute;inset:-2px;opacity:.9;
  background:
    linear-gradient(90deg,rgba(244,213,138,.22) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(0deg,rgba(244,213,138,.22) 1px,transparent 1px) 0 0/34px 34px;
  -webkit-mask:radial-gradient(60% 52% at 58% 60%,#000 0%,rgba(0,0,0,.35) 60%,transparent 85%);
  mask:radial-gradient(60% 52% at 58% 60%,#000 0%,rgba(0,0,0,.35) 60%,transparent 85%)}
#plataforma-tokenizacion .tkp-fb--grid:after{content:"";position:absolute;left:50%;top:56%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg) scaleY(.82);
  background:
    linear-gradient(90deg,rgba(5,9,15,.7) 2px,transparent 2px) 0 0/25% 25%,
    linear-gradient(0deg,rgba(5,9,15,.7) 2px,transparent 2px) 0 0/25% 25%,
    linear-gradient(135deg,#FFF1C9,#D8A646 45%,#A77927);
  box-shadow:0 0 60px rgba(216,166,70,.45);border-radius:4px;opacity:.92}

#plataforma-tokenizacion .tkp-step__b{padding:clamp(20px,2.4vw,30px);display:grid;gap:10px}
#plataforma-tokenizacion .tkp-step__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#plataforma-tokenizacion .tkp-step__n{font-size:.86rem;letter-spacing:.18em;color:var(--gold-2)}
#plataforma-tokenizacion .tkp-step .tkp-step__t{margin:0}
#plataforma-tokenizacion .tkp-step__t{font:500 clamp(1.3rem,2vw,1.6rem)/1.2 var(--serif);color:var(--cream);letter-spacing:-.01em}
#plataforma-tokenizacion .tkp-step__d p{font-size:clamp(1rem,1.05vw,1.06rem);line-height:1.6;color:var(--cream-2)}
#plataforma-tokenizacion .tkp-mark{display:none}
/* apilado: el número grande vive sobre la imagen; el mini-diagrama vive en la franja de texto, a la derecha del título */
#plataforma-tokenizacion:not(.is-pin) .tkp-step__b{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
#plataforma-tokenizacion:not(.is-pin) .tkp-step__n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#plataforma-tokenizacion:not(.is-pin) .tkp-step__row{grid-column:2;grid-row:1}
#plataforma-tokenizacion:not(.is-pin) .tkp-step__t{grid-column:1;grid-row:1}
#plataforma-tokenizacion:not(.is-pin) .tkp-step__d{grid-column:1/-1;grid-row:2}
#plataforma-tokenizacion:not(.is-pin) .tkp-mini{width:92px}
#plataforma-tokenizacion .tkp-liq{display:none}

/* ---------- Mini-diagramas SVG (isométricos) ---------- */
#plataforma-tokenizacion .tkp-mini{display:block;width:96px;height:auto;flex:none;overflow:visible}
#plataforma-tokenizacion .tkp-mini .sh{fill:rgba(216,166,70,.14)}
#plataforma-tokenizacion .tkp-mini .ft{fill:#EFCB7E;stroke:rgba(255,241,201,.85);stroke-width:.7;stroke-linejoin:round}
#plataforma-tokenizacion .tkp-mini .fx{fill:#C08A31;stroke:rgba(255,241,201,.55);stroke-width:.7;stroke-linejoin:round}
#plataforma-tokenizacion .tkp-mini .fz{fill:#7E5A1C;stroke:rgba(255,241,201,.45);stroke-width:.7;stroke-linejoin:round}
#plataforma-tokenizacion .tkp-mini .gl{stroke:#FFF1C9;stroke-width:.8;opacity:.8}
#plataforma-tokenizacion .tkp-mini .gv{opacity:.45}
#plataforma-tokenizacion .tkp-mini .ring{transform:translateY(calc(var(--h) * .62))}
#plataforma-tokenizacion .tkp-mini .rg{fill:rgba(244,213,138,.16)}
#plataforma-tokenizacion .tkp-mini .rl{fill:none;stroke:#FFF1C9;stroke-width:1.6;filter:drop-shadow(0 0 3px #F4D58A)}
#plataforma-tokenizacion .tkp-mini .cb{transform:translate(var(--x),var(--y))}
#plataforma-tokenizacion .tkp-mini .pl{fill:rgba(255,241,201,.16);stroke:rgba(255,241,201,.7);stroke-width:.8}
#plataforma-tokenizacion .tkp-mini .cut{opacity:.0}
#plataforma-tokenizacion .tkp-mini .ar{fill:none;stroke:rgba(243,234,219,.55);stroke-width:1;stroke-dasharray:2 4}
#plataforma-tokenizacion .tkp-mini .rv{fill:none;stroke:#F4D58A;stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7;filter:drop-shadow(0 0 2px rgba(216,166,70,.8))}
#plataforma-tokenizacion .tkp-mini .inv circle{fill:#F3EADB;filter:drop-shadow(0 0 4px rgba(243,234,219,.9))}
#plataforma-tokenizacion .tkp-mini .pool{fill:rgba(244,213,138,.45);filter:blur(2px)}

/* animación de los mini-diagramas (solo con .tkp-anim y la tarjeta en pantalla) */
@keyframes tkp-scan{0%{transform:translateY(0)}100%{transform:translateY(var(--h))}}
@keyframes tkp-lines{0%,8%{opacity:0}30%,100%{opacity:.8}}
@keyframes tkp-split{0%,14%{transform:translate(0,0)}60%,100%{transform:translate(var(--x),var(--y))}}
@keyframes tkp-cut{0%,4%{opacity:0;transform:translateX(-46px)}22%{opacity:1}46%{opacity:0;transform:translateX(46px)}100%{opacity:0}}
@keyframes tkp-flow{to{stroke-dashoffset:-48}}
@keyframes tkp-arc{0%{stroke-dashoffset:60;opacity:0}20%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes tkp-pop{0%,30%{transform:scale(.2);opacity:0}55%,100%{transform:scale(1);opacity:1}}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--scan .ring{animation:tkp-scan 2.8s var(--ease-io) infinite alternate}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--scan .gl:not(.gv){animation:tkp-lines 2.8s var(--ease) var(--d) infinite alternate both}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--tiles .cb{animation:tkp-split 3.4s var(--ease-io) infinite alternate both}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--tiles .cut{animation:tkp-cut 6.8s var(--ease-io) infinite}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--cap .rv{animation:tkp-flow 1.6s linear infinite}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--cap .ar{stroke-dasharray:60;animation:tkp-arc 2.4s var(--ease) var(--d) both}
#plataforma-tokenizacion.tkp-anim .is-run .tkp-mini--cap .inv circle{transform-box:fill-box;transform-origin:center;animation:tkp-pop 2.4s var(--ease) var(--d) both}

/* ---------- Celular y tableta (<900px): apilado + riel de progreso + contador ---------- */
@media (max-width:899.98px){
  #plataforma-tokenizacion .tkp-flow{padding-left:44px}
  /* .tkp-side sin z-index (no crea contexto): riel (0) < tarjetas con su marca de tinta sólida (2) < contador (5); el riel nunca tacha «02»/«03» */
  #plataforma-tokenizacion .tkp-side{position:absolute;left:0;top:0;bottom:0;width:28px;pointer-events:none}
  #plataforma-tokenizacion .tkp-rail{position:absolute;z-index:0;left:13px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
  #plataforma-tokenizacion .tkp-steps{position:relative;z-index:2}
  #plataforma-tokenizacion .tkp-step{position:relative}
  #plataforma-tokenizacion .tkp-rail__fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--tkp-g1),var(--tkp-g) 40%,var(--tkp-g3));transform-origin:50% 0;transform:scaleY(1)}
  #plataforma-tokenizacion.tkp-js .tkp-rail__fill{transform:scaleY(0)}
  #plataforma-tokenizacion .tkp-mark{display:grid;place-items:center;position:absolute;left:-44px;top:0;width:28px;height:28px;border-radius:50%;
    font:800 12px/1 var(--sans);font-style:normal;letter-spacing:0;color:var(--gold-2);background:var(--ink);border:1px solid var(--hair);z-index:3;box-shadow:0 0 0 4px var(--ink);transition:background .5s,color .5s,border-color .5s,box-shadow .5s}
  #plataforma-tokenizacion .tkp-step{overflow:visible}
  #plataforma-tokenizacion .tkp-card__m{border-radius:var(--r) var(--r) 0 0}
  #plataforma-tokenizacion .tkp-step.is-active .tkp-mark,#plataforma-tokenizacion .tkp-step.is-past .tkp-mark{background:var(--gold-grad);color:var(--ink);border-color:var(--gold);box-shadow:0 0 18px rgba(216,166,70,.45)}
  /* contador vertical dentro del riel: se pega bajo la barra de navegación y viaja por el canal izquierdo, fuera del texto */
  #plataforma-tokenizacion .tkp-count{z-index:5;position:sticky;top:calc(var(--nav-h) + 14px);display:flex;align-items:center;gap:6px;margin:44px 0 0;width:28px;
    padding:12px 0;border-radius:999px;border:1px solid var(--hair);background:var(--ink);box-shadow:0 0 0 4px var(--ink);
    writing-mode:vertical-rl;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2)}
  #plataforma-tokenizacion .tkp-count b{color:var(--gold-2);font-size:13px;letter-spacing:.04em}
  #plataforma-tokenizacion .tkp-count i{font-style:normal;color:var(--mute)}
  #plataforma-tokenizacion .tkp-count .cifra{letter-spacing:0}
  #plataforma-tokenizacion .tkp-stage{display:none}
  #plataforma-tokenizacion .tkp-step__d p{font-size:1rem}
}
/* celular estrecho: «02» y título caben con 16 px de canalón (320–479px) */
@media (max-width:479.98px){
  #plataforma-tokenizacion .tkp-head{column-gap:12px}
  #plataforma-tokenizacion .tkp-num{font-size:min(22vw,6.2rem)}
  #plataforma-tokenizacion .tkp-title{font-size:clamp(1.7rem,8.4vw,2.3rem)}
}
/* celular estrecho (<400px): la foto baja a 1:1 y nunca pasa de 46 % de la pantalla, para que el texto del paso asome */
@media (max-width:399.98px){
  #plataforma-tokenizacion .tkp-card__m{aspect-ratio:1/1;max-height:46svh}
}
@media (max-width:899.98px) and (min-width:600px){
  #plataforma-tokenizacion .tkp-card__m{aspect-ratio:16/11}
  #plataforma-tokenizacion .tkp-card__m img{object-position:var(--op,50% 50%)}
}

/* ---------- Escritorio base (≥900px sin escenario): 3 bloques en fila, diagramas estáticos ---------- */
@media (min-width:900px){
  #plataforma-tokenizacion .tkp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  #plataforma-tokenizacion .tkp-card__m{aspect-ratio:4/3}
  #plataforma-tokenizacion .tkp-card__m img{object-position:var(--op,50% 50%)}
  #plataforma-tokenizacion .tkp-big{font-size:clamp(3.6rem,5vw,5rem)}
  /* diagrama estático: franja propia de ~160px bajo la imagen; número abajo para no tapar caras */
  #plataforma-tokenizacion:not(.is-pin) .tkp-step__b{grid-template-columns:minmax(0,1fr);padding-top:0}
  #plataforma-tokenizacion:not(.is-pin) .tkp-step__row{grid-column:1;grid-row:1;justify-content:center;height:160px;margin-inline:calc(-1 * clamp(20px,2.4vw,30px));
    border-bottom:1px solid var(--line);background:radial-gradient(60% 70% at 50% 60%,rgba(216,166,70,.10),transparent 70%)}
  #plataforma-tokenizacion:not(.is-pin) .tkp-step__t{grid-column:1;grid-row:2;padding-top:clamp(12px,1.6vw,20px)}
  #plataforma-tokenizacion:not(.is-pin) .tkp-step__d{grid-row:3}
  #plataforma-tokenizacion:not(.is-pin) .tkp-mini{width:auto;height:148px}
  #plataforma-tokenizacion:not(.is-pin) .tkp-big{top:auto;bottom:6px}
  #plataforma-tokenizacion .tkp-side{display:none}
  #plataforma-tokenizacion .tkp-stage{display:none}
}

/* ============================================================
   ESCENARIO FIJADO (≥900px, JS + WebGL): .is-pin
   ============================================================ */
#plataforma-tokenizacion.is-pin{padding-block:clamp(40px,6vw,90px)}
#plataforma-tokenizacion.is-pin .tkp-track{position:relative;height:330svh}
#plataforma-tokenizacion.is-pin .tkp-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:var(--nav-h)}
#plataforma-tokenizacion.is-pin .tkp-grid{display:grid;width:100%;height:100%;max-height:900px;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);column-gap:clamp(36px,4.6vw,88px);
  padding-block:clamp(14px,3vh,40px)}
@media (min-width:1100px){#plataforma-tokenizacion.is-pin .tkp-grid{padding-right:max(var(--gut),78px)}}
#plataforma-tokenizacion.is-pin .tkp-head{grid-column:1;grid-row:2;align-self:end;row-gap:clamp(10px,1.6vh,20px)}
#plataforma-tokenizacion.is-pin .tkp-num{font-size:clamp(5rem,min(10vw,19vh),10.5rem)}
#plataforma-tokenizacion.is-pin .tkp-title{font-size:clamp(2.2rem,min(4.2vw,7.6vh),4.2rem)}
#plataforma-tokenizacion.is-pin .tkp-sub{margin-top:clamp(6px,1.2vh,14px)}
#plataforma-tokenizacion.is-pin .tkp-body{font-size:clamp(.98rem,min(1.05vw,2vh),1.06rem)}
#plataforma-tokenizacion.is-pin .tkp-flow{grid-column:1;grid-row:3;margin-top:clamp(16px,3vh,36px);align-self:start}
#plataforma-tokenizacion.is-pin .tkp-steps{grid-template-columns:minmax(0,1fr);gap:10px}
#plataforma-tokenizacion.is-pin .tkp-card__m,#plataforma-tokenizacion.is-pin .tkp-mini{display:none}

/* paso = pestaña: compacta; la activa se abre y destila oro */
#plataforma-tokenizacion.is-pin .tkp-step{cursor:pointer;overflow:visible;border-radius:18px;background:rgba(13,27,40,.38);border-color:var(--line);
  transition:border-color .5s var(--ease),background .5s var(--ease)}
#plataforma-tokenizacion.is-pin .tkp-step:hover{border-color:var(--line-2)}
#plataforma-tokenizacion.is-pin .tkp-step:focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold-2)}
#plataforma-tokenizacion.is-pin .tkp-step.is-active{background:rgba(16,39,58,.62);border-color:var(--hair)}
#plataforma-tokenizacion.is-pin .tkp-step__b{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:0;align-items:start;padding:clamp(12px,2vh,20px) clamp(18px,1.8vw,26px)}
#plataforma-tokenizacion.is-pin .tkp-step__row{grid-column:1;grid-row:1}
#plataforma-tokenizacion.is-pin .tkp-step__n{display:inline-block;min-width:2.2em;padding-top:.42em;font-size:.9rem;color:var(--mute);transition:color .5s}
#plataforma-tokenizacion.is-pin .tkp-step.is-lit .tkp-step__n{color:var(--gold-2);text-shadow:0 0 14px rgba(244,213,138,.55)}
#plataforma-tokenizacion.is-pin .tkp-step__t{grid-column:2;grid-row:1;font-size:clamp(1.12rem,min(1.45vw,2.6vh),1.4rem);color:var(--cream-2);transition:color .5s}
#plataforma-tokenizacion.is-pin .tkp-step.is-active .tkp-step__t{color:var(--cream)}
#plataforma-tokenizacion.is-pin .tkp-step__d{grid-column:2;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s var(--ease),opacity .5s var(--ease)}
#plataforma-tokenizacion.is-pin .tkp-step__d>p{overflow:hidden;min-height:0;padding-top:0;transition:padding-top .7s var(--ease);font-size:clamp(.96rem,min(1vw,1.9vh),1.04rem)}
#plataforma-tokenizacion.is-pin .tkp-step.is-active .tkp-step__d{grid-template-rows:1fr;opacity:1}
#plataforma-tokenizacion.is-pin .tkp-step.is-active .tkp-step__d>p{padding-top:8px}

#plataforma-tokenizacion.tkp-measure .tkp-step__d,#plataforma-tokenizacion.tkp-measure .tkp-step__d>p{transition:none!important}

/* oro que destila: menisco por el borde superior → gota por el hilo izquierdo → número */
#plataforma-tokenizacion.is-pin .tkp-liq{display:block;position:absolute;inset:0;pointer-events:none;border-radius:inherit}
#plataforma-tokenizacion.is-pin .tkp-liq__top{position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--tkp-g3),var(--tkp-g2) 60%,var(--tkp-g1));box-shadow:0 0 10px rgba(244,213,138,.6);transform-origin:100% 50%;transform:scaleX(0)}
#plataforma-tokenizacion.is-pin .tkp-liq__side{position:absolute;left:-1px;top:16px;width:2px;height:var(--to,34px);border-radius:2px;
  background:linear-gradient(180deg,var(--tkp-g1),var(--tkp-g) 70%,var(--tkp-g3));box-shadow:0 0 10px rgba(244,213,138,.55);transform-origin:50% 0;transform:scaleY(0)}
#plataforma-tokenizacion.is-pin .tkp-liq__head{position:absolute;left:0;top:-4px;width:14px;height:8px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(60% 60% at 40% 35%,#FFF6DA,var(--tkp-g2) 55%,var(--tkp-g3));box-shadow:0 0 14px rgba(244,213,138,.8);opacity:0}
#plataforma-tokenizacion.is-pin .tkp-liq__drop{position:absolute;left:-4px;top:0;width:8px;height:10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(60% 60% at 40% 35%,#FFF6DA,var(--tkp-g2) 55%,var(--tkp-g3));box-shadow:0 0 12px rgba(244,213,138,.8);opacity:0}

/* ---------- Escenario derecho ---------- */
#plataforma-tokenizacion.is-pin .tkp-stage{display:block;position:relative;grid-column:2;grid-row:1/5;min-height:0;height:100%}
#plataforma-tokenizacion.is-pin .tkp-diag{position:absolute;left:-4%;right:0;top:0;height:64%}
#plataforma-tokenizacion .tkp-diag__gl{position:absolute;inset:0}
#plataforma-tokenizacion .tkp-diag__gl canvas{display:block;width:100%!important;height:100%!important}
#plataforma-tokenizacion .tkp-diag__fb{position:absolute;inset:6% 8% 4%;display:none}
#plataforma-tokenizacion .tkp-diag__fb .tkp-mini{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease)}
#plataforma-tokenizacion .tkp-diag__fb .tkp-mini.is-on{opacity:1}
#plataforma-tokenizacion.is-pin .tkp-diag__fb .tkp-mini{display:block}
#plataforma-tokenizacion.tkp-nogl .tkp-diag__fb{display:block}
#plataforma-tokenizacion.tkp-nogl .tkp-lines,#plataforma-tokenizacion.tkp-nogl .tkp-lab{display:none}
#plataforma-tokenizacion .tkp-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#plataforma-tokenizacion .tkp-lines line{stroke:rgba(243,234,219,.16);stroke-width:1;stroke-dasharray:2 3;transition:stroke .5s}
#plataforma-tokenizacion .tkp-lines line:nth-of-type(3),#plataforma-tokenizacion .tkp-lines circle:nth-of-type(3){opacity:0}
#plataforma-tokenizacion .tkp-lines circle{fill:rgba(206,193,174,.45);transition:fill .5s}
#plataforma-tokenizacion .tkp-lines line.is-on{stroke:var(--gold-2);stroke-dasharray:none}
#plataforma-tokenizacion .tkp-lines circle.is-on{fill:var(--gold-2)}
/* rótulos: inactivos crema-2 al 82 % (≈ 8:1 sobre tinta), activos crema + número de oro */
#plataforma-tokenizacion .tkp-lab{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px;max-width:172px;
  font:600 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--cream-2);opacity:.82;transition:opacity .5s,color .5s;will-change:transform;
  text-shadow:0 1px 8px rgba(5,9,15,.9);
  /* por encima del canvas: las teselas viajeras pasan POR DETRÁS del rótulo y nunca lo tapan */
  z-index:3;padding:4px 10px 4px 8px;margin:-4px -10px -4px -8px;border-radius:10px;background:rgba(5,9,15,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#plataforma-tokenizacion .tkp-lines{z-index:2}
#plataforma-tokenizacion .tkp-lab b{font-size:12.5px;letter-spacing:.1em;color:var(--cream-2);transition:color .5s}
#plataforma-tokenizacion .tkp-lab--cap{max-width:none;white-space:nowrap;min-width:180px}
#plataforma-tokenizacion .tkp-lab.is-on{opacity:1;color:var(--cream)}
#plataforma-tokenizacion .tkp-lab.is-on b{color:var(--gold-2)}

#plataforma-tokenizacion.is-pin .tkp-panel{position:absolute;right:0;bottom:0;margin:0;width:min(88%,calc((100svh - var(--nav-h)) * .44 * 16 / 9));aspect-ratio:16/9;
  border-radius:24px;overflow:hidden;background:var(--ink-2);border:1px solid var(--hair);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(5,9,15,.6);perspective:1400px;isolation:isolate}
#plataforma-tokenizacion .tkp-panel:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  box-shadow:inset 0 1px 0 rgba(255,241,201,.28)}
#plataforma-tokenizacion .tkp-layer{position:absolute;inset:0;opacity:0;visibility:hidden}
#plataforma-tokenizacion .tkp-layer.is-on{opacity:1;visibility:visible}
#plataforma-tokenizacion .tkp-layer img,#plataforma-tokenizacion .tkp-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
#plataforma-tokenizacion .tkp-tiles{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none;
  visibility:hidden;transform-style:preserve-3d}
#plataforma-tokenizacion .tkp-tiles.is-on{visibility:visible}
#plataforma-tokenizacion .tkp-tile{position:relative;transform-style:preserve-3d}
#plataforma-tokenizacion .tkp-tile>b{position:absolute;inset:-.5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-repeat:no-repeat;
  background-color:var(--ink-2);box-shadow:inset 0 0 0 .5px rgba(244,213,138,.0)}
#plataforma-tokenizacion .tkp-tile>b+b{transform:rotateY(180deg)}
#plataforma-tokenizacion .tkp-tile.is-edge>b{box-shadow:inset 0 0 0 1px rgba(244,213,138,.55)}
#plataforma-tokenizacion .tkp-panel__shade{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,15,0) 55%,rgba(5,9,15,.72) 100%)}
#plataforma-tokenizacion .tkp-cap{display:none}
#plataforma-tokenizacion.is-pin .tkp-cap{position:absolute;left:18px;bottom:16px;z-index:7;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(5,9,15,.62);border:1px solid var(--hair);font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2)}
#plataforma-tokenizacion .tkp-cap b{color:var(--gold-2);font-size:.9rem;letter-spacing:0}
#plataforma-tokenizacion .tkp-cap i{font-style:normal;color:var(--mute)}
#plataforma-tokenizacion .tkp-cap .cifra{letter-spacing:0}

/* pantallas bajas (1280×720): más compacto */
@media (min-width:900px) and (max-height:780px){
  #plataforma-tokenizacion.is-pin .tkp-diag{height:58%}
}

/* gama baja: sin backdrop-filter */
#plataforma-tokenizacion.tkp-low .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink-2)}