/* KlipTok v144 · Catálogo visual de herramientas (assets/kt-v144-catalogo.js · catalogo-herramientas/ · data/herramientas-catalogo.json)
   Claro/oscuro: html.dark o preferencia del sistema. Adaptable a ordenador, tableta y móvil. */
.kc{--c1:#6d4af0;--c2:#a855f7;--c3:#ec4899;--bg:#f6f4ff;--card:#fff;--fg:#1e1b4b;--mut:#64748b;--line:rgba(124,58,237,.16);--sh:0 10px 30px -14px rgba(76,29,149,.35);
  max-width:1240px;margin:0 auto;padding:1rem 1rem 3rem;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
html.dark .kc{--bg:#0b1020;--card:#131a33;--fg:#e8eaff;--mut:#9aa6c9;--line:rgba(148,163,184,.2);--sh:0 14px 34px -16px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){html:not(.light):not(.dark) .kc{--bg:#0b1020;--card:#131a33;--fg:#e8eaff;--mut:#9aa6c9;--line:rgba(148,163,184,.2);--sh:0 14px 34px -16px rgba(0,0,0,.7)}}
body:has(#kc){background:#f6f4ff}html.dark body:has(#kc){background:#0b1020}
@media (prefers-color-scheme:dark){html:not(.light):not(.dark) body:has(#kc){background:#0b1020}}
.kc *{box-sizing:border-box}
#ktbar48{display:flex;gap:1rem;flex-wrap:wrap;padding:.6rem 1rem;font:600 .9rem system-ui,sans-serif;border-bottom:1px solid rgba(148,163,184,.3)}#ktbar48 a{color:#7c3aed;text-decoration:none}#ktbar48 b{margin-left:auto;color:inherit}

/* cabecera */
.kc-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.4rem 0 1.2rem;padding:1.5rem 1.6rem;border-radius:1.6rem;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#4f46e5 0%,transparent 55%),radial-gradient(100% 120% at 100% 100%,#ec4899 0%,transparent 55%),linear-gradient(120deg,#6d4af0,#a855f7);box-shadow:0 22px 44px -22px #7c3aed}
.kc-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.28),transparent 40%);pointer-events:none}
.kc-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.9;background:rgba(255,255,255,.18);padding:.25rem .7rem;border-radius:999px}
.kc-hero h1{margin:.5rem 0 .2rem;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.01em}
.kc-hero p{margin:0;opacity:.94;max-width:38rem}
.kc-stats{display:grid;grid-template-columns:auto auto;gap:.1rem .6rem;align-items:baseline;position:relative;z-index:1;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:.8rem 1.2rem;border-radius:1.1rem}
.kc-stats b{font-size:1.9rem;line-height:1;text-align:right}.kc-stats span{font-size:.8rem;opacity:.9}

/* destacadas / carrusel 3D */
.kc-feat{margin:0 0 1.6rem;border-radius:1.6rem;padding:1.1rem 1rem .9rem;background:radial-gradient(ellipse at 50% 35%,#1e1b4b 0%,#0b0b14 75%);color:#fff;box-shadow:var(--sh);overflow:hidden}
.kc-feat h2{margin:0 0 .2rem .4rem;font-size:1.1rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}.kc-feat h2 small{font-size:.76rem;font-weight:600;opacity:.65}
.kc-stage{--cw:230px;--ch:326px;position:relative;height:calc(var(--ch) + 70px);perspective:1500px;perspective-origin:50% 42%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:0;margin:0 -.4rem}
.kc-stage.drag{cursor:grabbing}.kc-stage:focus-visible{box-shadow:inset 0 0 0 2px #a78bfa;border-radius:1rem}
.kc-ring{position:absolute;inset:0;transform-style:preserve-3d}
.kc-c3{position:absolute;left:50%;top:calc(50% - 6px);width:var(--cw);height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}
.kc-c3a{display:flex;flex-direction:column;width:100%;height:100%;border-radius:26px;overflow:hidden;color:#fff;text-decoration:none;background:#0f1330;border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 50px -20px rgba(0,0,0,.8);-webkit-user-drag:none}
.kc-c3.on .kc-c3a{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 44px rgba(168,85,247,.55),0 26px 50px -18px rgba(0,0,0,.85)}
.kc-c3a .kc-art{flex:0 0 56%;width:100%;height:56%;display:block;pointer-events:none}
.kc-c3b{position:relative;flex:1;display:flex;flex-direction:column;gap:.15rem;padding:1.5rem .9rem .8rem;background:linear-gradient(180deg,#171c44,#0d1030)}
.kc-c3b i{position:absolute;left:.9rem;top:-1.3rem;width:2.6rem;height:2.6rem;display:grid;place-items:center;font-style:normal;font-size:1.4rem;background:#fff;border-radius:.9rem;box-shadow:0 8px 18px -6px rgba(0,0,0,.55)}
.kc-c3b b{font-size:1rem;line-height:1.2}.kc-c3b small{font-size:.76rem;line-height:1.35;opacity:.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kc-c3b em{margin-top:auto;font-style:normal;font-size:.78rem;font-weight:800;color:#c4b5fd}
.kc-ctl{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.2rem;flex-wrap:wrap}
.kc-arrow{width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:.2s}
.kc-arrow:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
.kc-modes{display:flex;background:rgba(255,255,255,.1);border-radius:999px;padding:.2rem}
.kc-modes button{border:0;background:transparent;color:#fff;font:700 .8rem system-ui;padding:.45rem .9rem;border-radius:999px;cursor:pointer;opacity:.75;transition:.2s}
.kc-modes button.on{background:linear-gradient(100deg,#6d4af0,#ec4899);opacity:1}
.kc-hint{margin:.5rem 0 0;text-align:center;font-size:.74rem;opacity:.6}

/* buscador y filtros */
.kc-bar{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:0 0 .7rem}
.kc-search{flex:1 1 17rem;display:flex;align-items:center;gap:.6rem;padding:.2rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--card);box-shadow:var(--sh)}
.kc-search:focus-within{border-color:var(--c2);box-shadow:0 0 0 3px rgba(168,85,247,.25)}
.kc-search input{flex:1;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:16px;padding:.6rem 0;min-width:0}
.kc-count{font-size:.85rem;color:var(--mut);font-weight:600}
.kc-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 1.2rem}
.kc-chip{--h:262;border:1px solid var(--line);background:var(--card);color:inherit;font:700 .82rem system-ui;padding:.5rem .85rem;border-radius:999px;cursor:pointer;transition:.2s;display:inline-flex;gap:.4rem;align-items:center}
.kc-chip b{font-size:.7rem;background:hsla(var(--h),80%,55%,.16);color:hsl(var(--h),70%,42%);padding:.05rem .45rem;border-radius:999px}
.kc-chip:hover{transform:translateY(-2px);border-color:hsl(var(--h),70%,60%)}
.kc-chip.on{background:linear-gradient(100deg,hsl(var(--h),75%,48%),hsl(calc(var(--h) + 40),85%,58%));color:#fff;border-color:transparent}
.kc-chip.on b{background:rgba(255,255,255,.25);color:#fff}
html.dark .kc-chip b{color:hsl(var(--h),90%,75%)}

/* secciones y tarjetas */
.kc-sec{margin:0 0 2rem}
.kc-sec h2{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .8rem;font-size:1.2rem}
.kc-sec h2 small{font-size:.74rem;font-weight:700;color:var(--mut);background:var(--card);border:1px solid var(--line);padding:.1rem .55rem;border-radius:999px}
.kc-dot{--h:262;width:.85rem;height:.85rem;border-radius:50%;background:linear-gradient(135deg,hsl(var(--h),80%,50%),hsl(calc(var(--h) + 50),90%,62%));box-shadow:0 0 0 4px hsla(var(--h),80%,55%,.2)}
.kc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.1rem}
.kc-tool{background:var(--card);border:1px solid var(--line);border-radius:1.4rem;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:kcin .55s both;animation-delay:calc(var(--i,0) * 45ms)}
.kc-tool:hover,.kc-tool:focus-within{transform:translateY(-7px);box-shadow:0 26px 44px -18px rgba(124,58,237,.55)}
.kc-media{position:relative;display:block;aspect-ratio:5/3;overflow:hidden;background:#312e81}
.kc-media .kc-art{width:100%;height:100%;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.kc-tool:hover .kc-art{transform:scale(1.08)}
.kc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,6,32,.35));pointer-events:none}
.kc-badge{position:absolute;left:.85rem;top:0;transform:translateY(-50%);z-index:2;width:2.6rem;height:2.6rem;display:grid;place-items:center;font-size:1.35rem;background:#fff;border-radius:.9rem;box-shadow:0 8px 18px -6px rgba(0,0,0,.5);transition:transform .35s}
.kc-tool:hover .kc-badge{transform:translateY(-50%) rotate(-8deg) scale(1.1)}
.kc-tag{position:absolute;right:.7rem;top:.7rem;font-size:.68rem;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(15,10,50,.5);backdrop-filter:blur(6px);padding:.22rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.kc-body{position:relative;padding:1.7rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.kc-body h3{margin:0;font-size:1.02rem;line-height:1.25}
.kc-body p{margin:0;font-size:.85rem;line-height:1.45;color:var(--mut);flex:1}
.kc-open{margin-top:.55rem;align-self:flex-start;display:inline-flex;gap:.4rem;align-items:center;font:800 .82rem system-ui;color:#fff;text-decoration:none;padding:.55rem .95rem;border-radius:.8rem;background:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899);box-shadow:0 10px 20px -10px #7c3aed;transition:.25s}
.kc-open span{transition:transform .25s}.kc-open:hover{filter:brightness(1.1);box-shadow:0 14px 24px -10px #7c3aed}.kc-open:hover span{transform:translateX(4px)}
.kc-open:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
.kc-empty{padding:2rem;text-align:center;color:var(--mut);background:var(--card);border:1px dashed var(--line);border-radius:1.2rem}

/* movimiento */
.kc-float{animation:kcf 5s ease-in-out infinite}
@keyframes kcf{50%{transform:translateY(-6px)}}
@keyframes kcin{from{opacity:0;transform:translateY(16px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.kc-tool,.kc-float{animation:none}.kc-tool,.kc-art,.kc-badge,.kc-open{transition:none}}

/* adaptación */
@media (max-width:760px){.kc{padding:.7rem .7rem 2.5rem}.kc-hero{padding:1.1rem}.kc-stats{display:none}.kc-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
  .kc-body{padding:1.6rem .75rem .8rem}.kc-body p{font-size:.78rem}.kc-open{padding:.5rem .75rem;font-size:.76rem}.kc-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none}.kc-chips::-webkit-scrollbar{display:none}.kc-chip{flex:0 0 auto}}
@media (max-width:420px){.kc-cards{grid-template-columns:1fr 1fr}.kc-tag{display:none}}