/* KlipTok v22 · menú móvil, scroll de barras laterales y DADO 3D */

/* ---------- Barras laterales y páginas del modo libro: scroll visible, suave e independiente ---------- */
html aside.kt-aside, html aside.no-scrollbar {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: #a78bfa transparent; scroll-behavior: smooth;
}
html aside.kt-aside::-webkit-scrollbar, html aside.no-scrollbar::-webkit-scrollbar, html .kt-pg::-webkit-scrollbar { display: block; width: 8px; }
html aside.kt-aside::-webkit-scrollbar-thumb, html aside.no-scrollbar::-webkit-scrollbar-thumb, html .kt-pg::-webkit-scrollbar-thumb { background: #a78bfa; border-radius: 8px; }
html aside.kt-aside::-webkit-scrollbar-track, html aside.no-scrollbar::-webkit-scrollbar-track, html .kt-pg::-webkit-scrollbar-track { background: transparent; }
html .kt-pg { scrollbar-width: thin; scrollbar-color: #a78bfa transparent; overscroll-behavior: contain; touch-action: pan-y; scroll-behavior: smooth; }

/* ---------- Móvil: ☰ abre el cajón lateral; segundo botón muestra la barra superior ---------- */
.k22-barsbtn { display: none; }
@media (max-width: 767px) {
  .k22-barsbtn { display: block; position: fixed; z-index: 70; top: 56px; inset-inline-start: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; }
  .k22-close { position: sticky; top: 0; align-self: flex-end; margin: -.25rem -.25rem 0 0; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; font-size: 16px; background: rgba(124,58,237,.15); color: inherit; flex: 0 0 auto; cursor: pointer; }
}
@media (min-width: 768px) { .k22-close { display: none; } }

/* ---------- DADO 3D → assets/kt-v29-dado.css (v29) ---------- */

/* ---------- v28 · Logo unificado: UN solo elemento (icono play + nombre dentro). El lema solo se ve al compartir el enlace (og:title) ---------- */
#logo-home.kt-logo { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 .95rem 0 .7rem; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #2563eb 0%, #7c3aed 52%, #ec4899 100%); box-shadow: 0 6px 16px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.25); white-space: nowrap; transition: transform .15s, box-shadow .15s; }
#logo-home.kt-logo:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(124,58,237,.38), inset 0 1px 0 rgba(255,255,255,.3); }
#logo-home.kt-logo:focus-visible { outline: 3px solid rgba(124,58,237,.55); outline-offset: 2px; }
.kt-logo-play { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.kt-logo-name { font: 800 1.08rem/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
@media (max-width: 439px) { #logo-home.kt-logo { height: 2.2rem; padding: 0 .7rem 0 .55rem; gap: .3rem; } .kt-logo-name { font-size: .95rem; } .kt-logo-play { width: 1rem; height: 1rem; } }
@media (max-width: 359px) { .kt-logo-name { display: none; } #logo-home.kt-logo { padding: 0 .6rem; } }