/* Tour de Duji v2 (demo). Pantalla fija: nada se va para abajo. La «pantalla» de cada escena es la app a tamaño real (capturas de 393 px). */
#screen-tour { display: none; }
#screen-tour.active {
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0; z-index: 900;
  top: var(--inset-sup, 0px);
  height: calc(var(--alto-real, 100dvh) - var(--inset-sup, 0px));
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  background: #FBF6EC; color: var(--text, #14223D); overflow: hidden; box-sizing: border-box;
  font-family: var(--font, system-ui, sans-serif);
}
[data-theme="dark"] #screen-tour.active { background: #0E1830; }
@media (min-width: 600px) {   /* escritorio: una columna del ancho de un teléfono, centrada */
  #screen-tour.active { left: 50%; right: auto; width: 430px; margin-left: -215px; box-shadow: 0 0 0 100vmax rgba(10,18,36,.55); }
}

/* Franja fina de controles */
.t-barra { display: flex; align-items: center; gap: 6px; height: 44px; flex-shrink: 0; padding: 0 8px; background: var(--surface, #fff); box-shadow: 0 1px 6px rgba(20,34,61,.16); position: relative; z-index: 8; }
.t-b { border: 0; background: rgba(20,34,61,.07); color: var(--text, #14223D); font: inherit; font-weight: 700; font-size: .8rem; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; line-height: 1; }
.t-b:active { transform: scale(.93); }
.t-pri { background: var(--primary, #E5760C); color: #fff; }
.t-puntos { flex: 1; min-width: 0; display: flex; gap: 4px; justify-content: center; }
.t-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--border, #D9D2C3); transition: all .3s; flex-shrink: 0; }
.t-puntos i.hecho { background: var(--primary, #E5760C); opacity: .55; }
.t-puntos i.ahora { background: var(--primary, #E5760C); width: 17px; border-radius: 5px; }

/* Escenario: ocupa todo el ancho; la captura se desplaza dentro, no se achica */
.t-esc { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #FBF6EC; }
.t-cuadro { position: absolute; inset: 0; overflow: hidden; background: #FBF6EC; }
.t-mov { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.t-cap { position: absolute; left: 0; top: 0; display: block; max-width: none; opacity: 0; }
.t-aro {
  position: absolute; border-radius: 18px; border: 3px solid #E5760C; box-sizing: border-box; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 18px 3px rgba(229,118,12,.65);
  transition: left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1), width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1), opacity .25s;
  animation: tLate 1.3s ease-in-out infinite;
}
.t-aro.ver { opacity: 1; }
@keyframes tLate { 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 30px 8px rgba(229,118,12,.85); } }
.t-toque { position: absolute; width: 0; height: 0; pointer-events: none; }
.t-toque::before, .t-toque::after { content: ''; position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: rgba(229,118,12,.45); opacity: 0; }
.t-toque.va::before { animation: tToque .7s ease-out; }
.t-toque.va::after { background: rgba(255,255,255,.9); border: 3px solid #E5760C; animation: tDedo .7s ease-out; }
@keyframes tToque { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes tDedo { 0% { transform: scale(1.4); opacity: 0; } 25% { transform: scale(.7); opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }
.t-listo { position: absolute; width: 30px; height: 30px; margin: -6px 0 0 -14px; border-radius: 50%; background: #3C8D2F; color: #fff; font-weight: 900; font-size: 19px; line-height: 30px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); transform: scale(0); opacity: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s; pointer-events: none; }
.t-listo.ver { transform: scale(1); opacity: 1; }
.t-chispas { position: absolute; left: 0; top: 0; pointer-events: none; }
.t-chispas span { position: absolute; font-size: 18px; margin: -9px 0 0 -9px; }

/* Videos de los juegos: a todo el ancho, sin sonido */
.t-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: none; background: #000; }
.t-cuadro.con-video .t-vid { display: block; }
.t-cuadro.con-video .t-mov { visibility: hidden; }
.t-rotulo { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -8px); background: rgba(20,34,61,.82); color: #fff; font-weight: 800; font-size: .88rem; padding: 5px 14px; border-radius: 16px;
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; white-space: nowrap; z-index: 2; }
.t-rotulo.ver { opacity: 1; transform: translate(-50%, 0); }

/* Portada (escena 0) y final (escena 8): Duji grande en el centro (el pone .t-dj); aquí solo el logo y el botón */
.t-portada, .t-final { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 16px 12px; text-align: center; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, #FFF3DD 0%, #FBF6EC 62%); }
[data-theme="dark"] .t-portada, [data-theme="dark"] .t-final { background: radial-gradient(120% 70% at 50% 0%, #1D2D52 0%, #0E1830 62%); }
#screen-tour.portada .t-portada, #screen-tour.final .t-final { display: flex; }
.t-portada > *, .t-final > * { pointer-events: auto; }
.t-logo { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.t-logo img { border-radius: 12px; }
.t-final { justify-content: flex-end; }
.t-grande { border: 0; border-radius: 16px; height: 52px; min-width: 220px; padding: 0 28px; font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; color: #fff;
  background: var(--primary, #E5760C); box-shadow: 0 4px 0 var(--primary-d, #B85A00); -webkit-tap-highlight-color: transparent; position: relative; z-index: 4; }
.t-grande:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-d, #B85A00); }
.t-grande.oculto { visibility: hidden; }
#screen-tour.portada .t-portada { justify-content: space-between; }

/* Burbuja de subtítulo compacta: máx. 3 líneas (16 px), el texto se desliza, no crece */
.t-habla { display: flex; align-items: stretch; gap: 0; flex-shrink: 0; padding: 8px 10px 8px 0; position: relative; z-index: 6; background: transparent; }
.t-hueco { width: 106px; flex-shrink: 0; }
.t-burbuja { position: relative; flex: 1; min-width: 0; background: var(--surface, #fff); border-radius: 16px; padding: 10px 13px; box-shadow: 0 2px 12px rgba(20,34,61,.2);
  height: 88px; box-sizing: border-box; overflow: hidden; }
.t-burbuja::before { content: ''; position: absolute; left: -7px; bottom: 22px; border: 8px solid transparent; border-right-color: var(--surface, #fff); border-left: 0; display: none; }
.t-clip { height: 66px; overflow: hidden; }
.t-txt { font-size: 16px; line-height: 22px; transition: transform .35s ease; text-align: left; }
.t-txt span { opacity: 0; transition: opacity .25s; }
.t-txt span.v { opacity: 1; }
#screen-tour.portada .t-habla, #screen-tour.final .t-habla { padding-left: 0; }
#screen-tour.portada .t-hueco, #screen-tour.final .t-hueco { width: 10px; }

/* Duji: UNA imagen real que se anima con GSAP (el punto de anclaje son sus pies) */
.t-dj { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 7; pointer-events: none; will-change: transform; }
.t-dj-esc { position: absolute; left: 0; bottom: 0; width: 0; height: 360px; transform-origin: 50% 100%; }
.t-dj-in { position: absolute; left: 0; bottom: 0; width: 0; height: 360px; transform-origin: 50% 100%; }
.t-dj-in > img { position: absolute; left: 0; bottom: 0; height: 360px; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(20,34,61,.28)); user-select: none; -webkit-user-drag: none; }
/* Duji por piezas (duji-piezas.js): capas apiladas del mismo tamaño; se anclan por los pies y se centran como la imagen entera */
.dp { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: none; filter: drop-shadow(0 6px 8px rgba(20,34,61,.28)); }
.dp-g { position: absolute; left: 0; top: 0; }
.dp-l { position: absolute; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#t-dj-mun { position: absolute; left: 0; bottom: 0; width: 0; height: 360px; }
.t-confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.t-confeti i { position: absolute; top: 0; width: 8px; height: 13px; border-radius: 2px; }

@media (max-height: 680px) {
  .t-burbuja { height: 82px; padding: 8px 12px; }
  .t-hueco { width: 100px; }
  .t-grande { height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .t-aro { animation: none; } .t-txt { transition: none; } }

body.tour-activo .rep-btn { display: none !important; }

/* dueño 2026-11-04: «Saltar» siempre visible y claro; en la portada, «Ahora no» */
.t-b.t-saltar { background: var(--surface, #fff); border: 1.5px solid rgba(20,34,61,.28); color: var(--text, #14223D); padding: 0 12px; }
.t-ahora-no { margin-top: 4px; border: 0; background: none; font: inherit; font-weight: 700; font-size: .95rem; color: var(--text-2, #4A5568); text-decoration: underline; text-underline-offset: 3px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.t-ahora-no.oculto { visibility: hidden; }
.t-arranque { display: flex; flex-direction: column; align-items: center; pointer-events: auto; }