/* 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 ---------- */
@media (max-width: 767px) {
  .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 ---------- */
#v3d-dice { display: none; flex-direction: row; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); width: 100%; max-height: 100%; padding: 8px 12px; position: relative; z-index: 4; }
#v3d-dice.on { display: flex; }
.dc-stage { --dh: min(620px, calc(100cqh - 120px), calc(100cqw - 300px), 68vh); --dw: var(--dh); --ds: var(--dw);   /* v30: cubo CUADRADO y más grande (antes columna 9:16 de 460 px) */ width: var(--dw); height: var(--dh); position: relative; perspective: calc(var(--dh) * 3.4); margin: calc(var(--dh) * .04) 0 calc(var(--dh) * .1); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.dc-stage.drag { cursor: grabbing; }
.dc-hop { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.dc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-3deg) rotateY(-12deg); transition: transform .75s cubic-bezier(.2,.85,.25,1); }  /* v28: reposo = de frente, con un giro mínimo para que se aprecie el volumen y las caras vecinas */
/* al parar la primera tirada el dado se endereza y queda UNA sola cara de frente (las 3 caras solo se ven al acceder por primera vez) */
.dc-tilt.dc-flat { transform: rotateX(-3deg) rotateY(-12deg); }
.dc-cube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.dc-face { position: absolute; inset: 0; border-radius: calc(var(--dw) * .12); overflow: hidden; border: 3px solid rgba(255,255,255,.75); backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; text-align: center; box-shadow: inset 0 0 28px rgba(255,255,255,.28), inset 0 -14px 30px rgba(0,0,0,.16); }
.dc-face:nth-child(1) { transform: translateZ(calc(var(--dw) / 2)); }
.dc-face:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--dw) / 2)); }
.dc-face:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--dw) / 2)); }
.dc-face:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--dw) / 2)); }
/* tapas (arriba/abajo): cubo cuadrado, las 6 caras miden lo mismo */
.dc-face:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--dw) / 2)); }
.dc-face:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--dw) / 2)); }
.dc-face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dc-face .dc-e { font-size: calc(var(--ds) * .3); filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); position: relative; }
.dc-face .dc-k { font-size: calc(var(--ds) * .075); font-weight: 800; letter-spacing: .08em; background: rgba(255,255,255,.28); padding: 2px 10px; border-radius: 999px; position: relative; }
.dc-face .dc-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px 7px; font-size: calc(var(--ds) * .068); font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-face .dc-eq { display: none; position: absolute; left: 0; right: 0; top: 14%; justify-content: center; align-items: flex-end; gap: 4px; height: 22%; }
.dc-face.playing .dc-eq { display: flex; }
.dc-eq i { width: 6px; background: #fff; border-radius: 3px; animation: dcEq .8s ease-in-out infinite alternate; height: 30%; }
.dc-eq i:nth-child(2) { animation-delay: .15s } .dc-eq i:nth-child(3) { animation-delay: .3s } .dc-eq i:nth-child(4) { animation-delay: .1s } .dc-eq i:nth-child(5) { animation-delay: .25s }
@keyframes dcEq { to { height: 100%; } }
.dc-shadow { position: absolute; left: 8%; right: 8%; bottom: -26px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%); transform-origin: center; }
/* v30 · panel lateral de control: el botón «Tirar» ya no está bajo el dado (liberaba poco alto) */
.dc-panel { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: clamp(150px, 20vw, 230px); flex: 0 0 auto; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.dc-pt { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #cbd5e1; font-weight: 800; }
.dc-tip { margin: 0; font-size: 12px; color: #cbd5e1; line-height: 1.35; }
.dc-ui { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
  #v3d-dice { gap: 8px; padding: 6px; }
  .dc-stage { --dh: min(620px, calc(100cqh - 110px), calc(100cqw - 104px)); }
  .dc-panel { width: 76px; padding: 8px; gap: 8px; align-items: center; }
  .dc-pt, .dc-tip, .dc-roll .dc-rl { display: none; }
  .dc-roll { width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 24px; }
  .dc-now { flex-direction: column; border-radius: 16px; padding: 6px; max-width: 64px; } .dc-now b { display: none; }
}
.dc-roll { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; font-size: 16px; font-weight: 800; color: #fff; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg,#ff6b6b,#feca57 45%,#1dd1a1); box-shadow: 0 8px 22px rgba(255,107,107,.45); transition: transform .15s; }
.dc-roll:hover { transform: translateY(-2px) scale(1.03); } .dc-roll:active { transform: scale(.97); } .dc-roll:disabled { opacity: .6; cursor: default; transform: none; }
.dc-snd { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 18px; cursor: pointer; }
.dc-snd[aria-pressed="false"] { opacity: .55; }
.dc-now { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; backdrop-filter: blur(6px); }
.dc-now[hidden] { display: none; }
.dc-now b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-now button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; flex: 0 0 auto; }
.dc-hint { margin: 0; color: #cbd5e1; font-size: 12px; text-align: center; max-width: 320px; }
@media (prefers-reduced-motion: reduce) { .dc-eq i { animation: none; height: 60%; } .dc-tilt { transition: none; } }
.dc-face.vplay .dc-e, .dc-face.vplay .dc-k { opacity: 0; transition: opacity .3s; }
#v3d.dice-mode .v3d-nav, #v3d.dice-mode #v3d-bar { display: none !important; }

/* ---------- 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; } }

/* ---------- v30 · Vista 3D integrada en la zona central (sin capa superpuesta ni segunda pantalla) ---------- */
#v3d { position: relative !important; inset: auto !important; z-index: auto !important; flex: 1 1 0; min-width: 0; min-height: 0; width: auto; height: auto; }
body.v3d-on #feed-container { display: none !important; }
body.v3d-on .kt-pg, body.v3d-on .k19-nav, body.v3d-on .k19-fab { display: none !important; }
#k19-topnav a[aria-current="page"] { background: linear-gradient(90deg, rgba(79,70,229,.14), rgba(219,39,119,.14)); border-radius: .6rem; font-weight: 700; }
@media (max-width: 767px) { body.k19-reels #k23-sec, body.k19-reels #v3d { margin-top: var(--kt-topbar, 56px); } }
#v3d-scene { container-type: size; }
/* panel del dado legible también en el tema claro (la Vista 3D abre en claro) */
#v3d:not([data-kt-theme="dark"]) .dc-panel { background: rgba(255,255,255,.78); border-color: rgba(124,58,237,.22); box-shadow: 0 10px 30px rgba(76,29,149,.12); }
#v3d:not([data-kt-theme="dark"]) .dc-pt, #v3d:not([data-kt-theme="dark"]) .dc-tip, #v3d:not([data-kt-theme="dark"]) .dc-hint { color: #475569; }
#v3d:not([data-kt-theme="dark"]) .dc-now { background: rgba(124,58,237,.12); color: #1e1b4b; }
#v3d:not([data-kt-theme="dark"]) .dc-snd { background: rgba(124,58,237,.12); color: #1e1b4b; border-color: rgba(124,58,237,.3); }

/* v30 · botón del panel de herramientas: el nombre largo solo cuando hay sitio en la cabecera */
.kt-bkb-long { display: none; }
@media (min-width: 1536px) { .kt-bkb-long { display: inline; } }
.kt-pg { padding-top: .9rem; }