/* ===== Biblioteca · capa visual ===== */
.kcm section{padding-block:clamp(56px,7vw,96px)}
.kcm .sec-sub{max-width:58ch}

/* títulos: se revelan de izquierda a derecha y subrayan en dorado */
.kcm-h{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position 1.1s cubic-bezier(.16,1,.3,1),mask-position 1.1s cubic-bezier(.16,1,.3,1)}
.kcm-h.kcm-in{-webkit-mask-position:0 0;mask-position:0 0}
.sec-title.kcm-h::after{content:"";display:block;width:56px;height:2px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1) .35s}
.sec-title.kcm-h.kcm-in::after{transform:scaleX(1)}

/* ---- cadena de valor: una línea con flujo ---- */
.kcm .kc-chain{position:relative;gap:0;align-items:stretch}
.kcm .kc-node{position:relative;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;transition-delay:calc(var(--i)*90ms)}
.kcm .kc-chain.kcm-in .kc-node{opacity:1;transform:none}
.kcm .kc-node::before{content:attr(data-step);display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--gold);opacity:.75;margin-bottom:8px}
.kcm .kc-chain.kcm-in .kc-node{animation:kcmPulse calc(var(--n,7)*1.1s) linear infinite;animation-delay:calc(var(--i)*1.1s + .8s)}
@keyframes kcmPulse{0%,100%{border-color:var(--border);box-shadow:none}4%,12%{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-glow),0 12px 30px -16px rgba(231,189,90,.6)}18%{border-color:var(--border);box-shadow:none}}
.kcm .kc-chain.filtered .kc-node{animation:none}
.kcm .kc-arrow{position:relative;flex:0 0 22px;align-self:center;height:2px;margin:0 2px;background:var(--border);overflow:hidden;font-size:0}
.kcm .kc-arrow::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:translateX(-120%)}
.kcm .kc-chain.kcm-in .kc-arrow::after{animation:kcmFlow calc(var(--n,7)*1.1s) linear infinite;animation-delay:calc(var(--i)*1.1s + 1.35s)}
@keyframes kcmFlow{0%{transform:translateX(-120%)}8%{transform:translateX(260%)}100%{transform:translateX(260%)}}
@media(max-width:760px){.kcm .kc-arrow{flex-basis:18px;width:2px;height:18px;margin:2px auto}.kcm .kc-arrow::after{width:100%;height:40%;background:linear-gradient(180deg,transparent,var(--gold),transparent)}@keyframes kcmFlow{0%{transform:translateY(-120%)}8%{transform:translateY(260%)}100%{transform:translateY(260%)}}}

/* ---- rejilla: menos ruido, entrada escalonada ---- */
.kcm .kc-card{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s;transition-delay:calc(var(--i,0)*70ms)}
.kcm .kc-card.kcm-in{opacity:1;transform:none}
.kcm .kc-card:hover{border-color:var(--border-gold);box-shadow:0 18px 40px -26px rgba(231,189,90,.55)}
.kcm .kc-tags span:nth-child(n+4){display:none}
.kcm .kc-card svg *{transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.kcm .kc-card:hover svg path,.kcm .kc-card:hover svg line,.kcm .kc-card:hover svg rect,.kcm .kc-card:hover svg circle{stroke-dasharray:240;animation:kcmDraw 1s cubic-bezier(.16,1,.3,1)}
@keyframes kcmDraw{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.kcm .kc-filters{display:flex;flex-direction:column;gap:10px;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--border)}

/* ---- glosario visual ---- */
.kcm .kc-cap{display:flex;flex-direction:column}
.kcm-viz{height:96px;margin:-2px 0 16px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,color-mix(in oklab,var(--bg-2) 70%,transparent),transparent);border:1px solid var(--border)}
.kcm-viz svg{width:100%;height:100%;overflow:visible;display:block}
.kcm-viz text{font-family:var(--mono);font-size:8.5px;fill:var(--text-muted)}
.kcm-viz .kc{text-anchor:middle}
.kcm-viz .kv{fill:var(--gold);font-weight:700}
.kcm-viz .kg{stroke:var(--border);stroke-width:1;fill:none;stroke-dasharray:2 4}
.kcm-viz .kp{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.kcm-viz .kp2{stroke:#e08a6a}
.kcm-viz .ka{fill:url(#none);fill:rgba(231,189,90,.12);opacity:0}
.kcm-viz .kd{fill:var(--gold);opacity:0}
.kcm-viz .kt{fill:var(--bg-3,rgba(255,255,255,.05))}
.kcm-viz .kb{fill:var(--gold);transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.kcm-viz .kb[style*="--i:0"]{fill:#e08a6a}.kcm-viz .kb[style*="--i:1"]{fill:#e0b36a}.kcm-viz .kb[style*="--i:3"]{fill:#5ad18a}
.kcm-viz .kv,.kcm-viz .kn{opacity:0}
.kcm-viz .kn circle{fill:var(--gold)}
.kcm-viz .kblk{fill:var(--text-muted);opacity:0}
.kcm-viz .kbox{fill:var(--bg-2);stroke:var(--border-gold)}
.kcm-viz .kbox+text{fill:var(--text);font-weight:700;font-size:9px}
.kcm-viz .kw{fill:#5ad18a;opacity:0}.kcm-viz .ks{fill:var(--gold);opacity:0}
.kcm-viz .kz{opacity:0}.kcm-viz .kz-ok{fill:rgba(90,209,138,.14)}.kcm-viz .kz-no{fill:rgba(224,138,106,.16)}
.kcm-viz .kx{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center}
.kcm-viz .kh{fill:var(--gold);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}

.kc-cap.kcm-in .kp{animation:kcmLine 1.6s cubic-bezier(.4,0,.2,1) .15s forwards}
.kc-cap.kcm-in .kp2{animation-delay:.5s}
.kc-cap.kcm-in .ka{animation:kcmFade .8s 1.2s forwards}
.kc-cap.kcm-in .kd{animation:kcmFade .4s 1.6s forwards}
.kc-cap.kcm-in .kb{animation:kcmGrowX .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.15s + var(--i)*.14s)}
.kc-cap.kcm-in .kv,.kc-cap.kcm-in .kn{animation:kcmFade .4s forwards;animation-delay:calc(.7s + var(--i)*.14s)}
.kc-cap.kcm-in .kcm-diff .kn{animation-delay:calc(.5s + var(--i)*.45s)}
.kc-cap.kcm-in .kblk{animation:kcmBlk 6s linear infinite;animation-delay:calc(var(--i)*.22s)}
.kc-cap.kcm-in .kw{animation:kcmW 2.4s linear infinite}.kc-cap.kcm-in .kw2{animation-delay:1.2s}
.kc-cap.kcm-in .ks{animation:kcmS 2.4s linear infinite .6s}.kc-cap.kcm-in .ks2{animation-delay:1.8s}
.kc-cap.kcm-in .kz{animation:kcmFade .6s 1.3s forwards}
.kc-cap.kcm-in .kx{animation:kcmFade .3s 1.5s forwards,kcmBeat 1.8s 1.8s ease-in-out infinite}
.kc-cap.kcm-in .kh{animation:kcmGrowY .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.15s + var(--i)*.22s)}
.kc-cap.kcm-in .kcm-halving .kv{animation-delay:calc(.55s + var(--i)*.22s)}
@keyframes kcmLine{to{stroke-dashoffset:0}}
@keyframes kcmFade{to{opacity:1}}
@keyframes kcmGrowX{to{transform:scaleX(1)}}
@keyframes kcmGrowY{to{transform:scaleY(1)}}
@keyframes kcmBlk{0%,100%{opacity:.25}10%{opacity:1}30%{opacity:.25}}
@keyframes kcmW{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(-80px)}}
@keyframes kcmS{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(80px)}}
@keyframes kcmBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* términos clave: se subrayan al entrar en pantalla */
.kcm-k{background:linear-gradient(90deg,rgba(231,189,90,.28),rgba(231,189,90,.28)) no-repeat 0 88%/0% 38%;color:inherit;padding:0 1px;border-radius:2px;transition:background-size .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(.6s + var(--i,0)*.12s)}
.kc-cap.kcm-in .kcm-k{background-size:100% 38%;color:var(--text)}
html[data-theme=light] .kcm-k{background-image:linear-gradient(90deg,rgba(201,138,30,.3),rgba(201,138,30,.3))}

@media (prefers-reduced-motion:reduce){
  .kcm-h{-webkit-mask-image:none;mask-image:none}
  .kcm .kc-node,.kcm .kc-card{opacity:1;transform:none;animation:none!important}
  .kcm .kc-arrow::after{display:none}
  .kcm-viz *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .kcm-k{background-size:100% 38%}
}