/* Hero de Embedded: escena 3D con los tres cubos de territorio y el cubo grande (krovee-cube3d.js,
   mountEmbedded). Primero se ve el póster y, cuando el 3D está listo, el lienzo lo releva sin salto. */
body.dg-page .kemb {
  /* móvil: sin la banda de etiquetas el cubo gana altura y anchura (la escena ocupa ~70 % del lienzo) */
  --kemb: clamp(230px, min(104vw, calc((100svh - 400px) * 1.25)), 470px);
  position: relative;
  flex: none;
  width: var(--kemb);
  aspect-ratio: 1;
  margin: calc(var(--kemb) * -0.06);
}

body.dg-page .kemb picture { display: contents; }
body.dg-page .kemb__poster,
body.dg-page .kemb__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

body.dg-page .kemb__poster { transition: opacity 0.5s ease 0.15s; }
body.dg-page .kemb__canvas {
  opacity: 0;
  transition: opacity 0.5s ease;
  touch-action: pan-y;            /* en móvil el gesto vertical sigue siendo scroll */
  -webkit-tap-highlight-color: transparent;
}
/* Escritorio: se pulsa para que entren; después, el cubo de Krovee se arrastra. */
body.dg-page .kemb.is-click .kemb__canvas { cursor: pointer; }
body.dg-page .kemb.is-done .kemb__canvas { cursor: grab; }
body.dg-page .kemb.is-done .kemb__canvas:active { cursor: grabbing; }
body.dg-page .kemb.is-live .kemb__canvas { opacity: 1; }
body.dg-page .kemb.is-live .kemb__poster { opacity: 0; }

@media (min-width: 901px) {
  body.dg-page .kemb {
    --kemb: min(680px, 46vw, calc(100svh - var(--dg-seen-h, 320px) - 24px));
  }
}

@media (max-width: 900px) {
  /* Solo móvil: fuera la banda de etiquetas (Embedded / La habitación de al lado / K/EMB) */
  body.dg-page .dg-open:has(.kemb) .territories__intro { display: none; }
  body.dg-page .dg-open:has(.kemb) .dg-open__mark { padding-top: clamp(8px, 1.6vh, 16px); padding-bottom: 0; }
  body.dg-page .dg-open:has(.kemb) .dg-open__copy { padding-top: 0; }
}