/* KlipTok v142 · DECORACIÓN DE LOS MENÚS (solo CSS) · tarjetas de color por subcategoría
   Menú de escritorio (.k58-panel), cajón de tablet (.k58-drawer) y hoja del móvil (#k136-sheet).
   Cada subcategoría es una tarjeta con banda degradada arriba, etiqueta en píldora de color y cada icono en un recuadro con brillo.
   Los colores rotan por posición (6 paletas), igual en claro y en oscuro. Quitar: borrar este archivo y su <link> en index.html. */

:root{
  --kd1a:#38bdf8;--kd1b:#6366f1;   /* azul */
  --kd2a:#fb923c;--kd2b:#f43f5e;   /* naranja */
  --kd3a:#34d399;--kd3b:#0ea5e9;   /* verde-mar */
  --kd4a:#a78bfa;--kd4b:#ec4899;   /* violeta-rosa */
  --kd5a:#fbbf24;--kd5b:#f97316;   /* ámbar */
  --kd6a:#f472b6;--kd6b:#ef4444;   /* rosa-rojo */
}

/* ---------- ESCRITORIO: panel grande ---------- */
.k58-panel{background:
  radial-gradient(60rem 14rem at 12% -4rem,color-mix(in srgb,var(--kd4a) 16%,transparent),transparent 70%),
  radial-gradient(50rem 12rem at 92% -4rem,color-mix(in srgb,var(--kd1a) 14%,transparent),transparent 70%),
  var(--k58-bg);
  border-bottom:0;box-shadow:0 26px 54px -12px rgba(15,23,42,.28),0 1px 0 var(--k58-line)}
.k58-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--kd1a),var(--kd4b),var(--kd5a),var(--kd3a))}
.k58-hd{border-bottom:0;padding-bottom:.2rem}
.k58-hd span{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;font-size:1.3rem;background:linear-gradient(135deg,color-mix(in srgb,var(--kd4a) 30%,transparent),color-mix(in srgb,var(--kd4b) 26%,transparent));box-shadow:0 6px 16px -6px var(--kd4b),inset 0 1px 0 rgba(255,255,255,.5)}
.k58-hd h4{font-size:.95rem;letter-spacing:.1em;background:linear-gradient(90deg,var(--kd4a),var(--kd4b));-webkit-background-clip:text;background-clip:text;color:transparent}
.k58-links{gap:.9rem;padding-top:.7rem}

/* ---------- tarjeta de cada subcategoría ---------- */
.k58-panel .k58-sub,.k58-dl .k58-sub{--a:var(--kd1a);--b:var(--kd1b);position:relative;overflow:hidden}
.k58-panel .k58-sub:nth-child(6n+2),.k58-dl .k58-sub:nth-child(6n+2){--a:var(--kd2a);--b:var(--kd2b)}
.k58-panel .k58-sub:nth-child(6n+3),.k58-dl .k58-sub:nth-child(6n+3){--a:var(--kd3a);--b:var(--kd3b)}
.k58-panel .k58-sub:nth-child(6n+4),.k58-dl .k58-sub:nth-child(6n+4){--a:var(--kd4a);--b:var(--kd4b)}
.k58-panel .k58-sub:nth-child(6n+5),.k58-dl .k58-sub:nth-child(6n+5){--a:var(--kd5a);--b:var(--kd5b)}
.k58-panel .k58-sub:nth-child(6n+6),.k58-dl .k58-sub:nth-child(6n+6){--a:var(--kd6a);--b:var(--kd6b)}

.k58-panel .k58-sub{padding:.85rem .6rem .65rem;gap:.15rem;border:1px solid color-mix(in srgb,var(--a) 28%,var(--k58-line));border-radius:1.15rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a) 11%,var(--k58-bg)),color-mix(in srgb,var(--b) 4%,var(--k58-bg)) 70%);
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--b) 70%,transparent);transition:transform .18s,box-shadow .18s}
.k58-panel .k58-sub:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px color-mix(in srgb,var(--b) 80%,transparent)}
.k58-panel .k58-sub::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a),var(--b))}
.k58-panel .k58-sub::after{content:"";position:absolute;right:-1.4rem;top:-1.4rem;width:5rem;height:5rem;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a) 34%,transparent),transparent);pointer-events:none}
.k58-panel .k58-sub h6{align-self:flex-start;margin:.1rem .4rem .45rem;padding:.32rem .75rem;border-radius:999px;font-size:.68rem;color:#fff;background:linear-gradient(100deg,var(--a),var(--b));box-shadow:0 6px 14px -6px var(--b)}

/* ---------- icono en recuadro con brillo ---------- */
.k58-panel .k58-sub .k58-ic,.k58-dl .k58-sub .k58-ic,.k58-sg .k58-ic{
  background:linear-gradient(135deg,color-mix(in srgb,var(--a,#a78bfa) 34%,transparent),color-mix(in srgb,var(--b,#ec4899) 24%,transparent));
  box-shadow:0 6px 14px -7px var(--b,#ec4899),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px color-mix(in srgb,var(--a,#a78bfa) 40%,transparent);
  transition:transform .18s,box-shadow .18s}
.k58-panel .k58-sub .k58-l:hover .k58-ic{transform:scale(1.1) rotate(-4deg);box-shadow:0 10px 20px -6px var(--b),inset 0 1px 0 rgba(255,255,255,.6)}
.k58-panel .k58-sub .k58-l{border-radius:.9rem}
.k58-panel .k58-sub .k58-l:hover,.k58-panel .k58-sub .k58-l:focus-visible{background:color-mix(in srgb,var(--a) 15%,transparent)}
.k58-panel .k58-sub .k58-l[data-k58-on]{background:color-mix(in srgb,var(--a) 20%,transparent);box-shadow:inset 3px 0 0 var(--b)}
.k58-panel .k58-sub .k58-tx b{font-size:.92rem}

/* ---------- tarjeta morada de la derecha: brillo ---------- */
.k58-promo{position:relative;overflow:hidden;border-radius:1.2rem;box-shadow:0 18px 34px -16px var(--kd4b)}
.k58-promo::after{content:"";position:absolute;right:-2rem;bottom:-2rem;width:8rem;height:8rem;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent)}

/* ---------- CAJÓN (tablet): mismas tarjetas en pequeño ---------- */
.k58-dl .k58-sub{padding:.55rem .35rem .45rem;margin:.35rem 0;border:1px solid color-mix(in srgb,var(--a) 28%,var(--k58-line));border-radius:1rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a) 10%,var(--k58-bg)),var(--k58-bg))}
.k58-dl .k58-sub::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--a),var(--b))}
.k58-dl .k58-sub h6{display:inline-block;padding:.28rem .65rem;border-radius:999px;color:#fff;background:linear-gradient(100deg,var(--a),var(--b));margin:.3rem .5rem .3rem}
.k58-acc summary i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;font-style:normal;background:linear-gradient(135deg,color-mix(in srgb,var(--kd4a) 30%,transparent),color-mix(in srgb,var(--kd4b) 24%,transparent));box-shadow:0 5px 12px -6px var(--kd4b)}

/* ---------- MÓVIL: hoja del menú único ---------- */
@media (max-width:767px){
  #k136-sheet{background:
    radial-gradient(28rem 12rem at 0% 0%,color-mix(in srgb,var(--kd4a) 20%,transparent),transparent 70%),
    radial-gradient(26rem 12rem at 100% 0%,color-mix(in srgb,var(--kd1a) 18%,transparent),transparent 70%),
    var(--k58-bg,#fff)}
  .dark #k136-sheet{background:
    radial-gradient(28rem 12rem at 0% 0%,color-mix(in srgb,var(--kd4a) 22%,transparent),transparent 70%),
    radial-gradient(26rem 12rem at 100% 0%,color-mix(in srgb,var(--kd1a) 18%,transparent),transparent 70%),#0f172a}
  .k136-find input{background:color-mix(in srgb,var(--k58-bg,#fff) 70%,transparent);box-shadow:0 8px 20px -14px var(--kd4b)}
  .k136-find input:focus{outline:0;border-color:var(--kd4a);box-shadow:0 0 0 3px color-mix(in srgb,var(--kd4a) 30%,transparent)}
  .k136-quick a{box-shadow:0 8px 18px -8px var(--kd4b)}
  .k136-g{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 30%,rgba(148,163,184,.3));border-top:0;padding-top:1rem;
    background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 55%);box-shadow:0 12px 26px -20px var(--c)}
  .k136-g::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 40%,#ec4899))}
  .k136-g h3{font-size:1.1rem}
  .k136-g h3 i{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.75rem;font-style:normal;
    background:linear-gradient(135deg,color-mix(in srgb,var(--c) 32%,transparent),color-mix(in srgb,var(--c) 14%,transparent));box-shadow:0 6px 14px -7px var(--c),inset 0 1px 0 rgba(255,255,255,.5)}
  /* subcategorías: píldora + cuadrícula con el mismo color, rotando por posición */
  .k136-g h4,.k136-g .k136-l{--a:var(--kd1a);--b:var(--kd1b)}
  .k136-g h4:nth-of-type(6n+2),.k136-g .k136-l:nth-of-type(6n+2){--a:var(--kd2a);--b:var(--kd2b)}
  .k136-g h4:nth-of-type(6n+3),.k136-g .k136-l:nth-of-type(6n+3){--a:var(--kd3a);--b:var(--kd3b)}
  .k136-g h4:nth-of-type(6n+4),.k136-g .k136-l:nth-of-type(6n+4){--a:var(--kd4a);--b:var(--kd4b)}
  .k136-g h4:nth-of-type(6n+5),.k136-g .k136-l:nth-of-type(6n+5){--a:var(--kd5a);--b:var(--kd5b)}
  .k136-g h4:nth-of-type(6n+6),.k136-g .k136-l:nth-of-type(6n+6){--a:var(--kd6a);--b:var(--kd6b)}
  .k136-g h4{display:inline-block;margin:.85rem 0 .45rem;padding:.32rem .8rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:1;color:#fff;background:linear-gradient(100deg,var(--a),var(--b));box-shadow:0 6px 14px -6px var(--b)}
  .k136-g .k136-l a{padding:.4rem .55rem;border-radius:.85rem;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 15%,transparent),color-mix(in srgb,var(--b) 8%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent);transition:transform .15s}
  .k136-g .k136-l a:active{transform:scale(.97)}
  .k136-g .k136-l a i{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;font-size:1.05rem;
    background:linear-gradient(135deg,color-mix(in srgb,var(--a) 36%,transparent),color-mix(in srgb,var(--b) 24%,transparent));box-shadow:0 5px 12px -6px var(--b),inset 0 1px 0 rgba(255,255,255,.55)}
}
@media (prefers-reduced-motion:reduce){.k58-panel .k58-sub,.k58-panel .k58-sub .k58-ic,.k136-g .k136-l a{transition:none!important}.k58-panel .k58-sub:hover{transform:none}}