/* ============================================================
   TUTORIAL GUIADO — velo, glosas, cartel y cursor (tutorial.js)
   ============================================================ */
.tut { position: fixed; inset: 0; z-index: 900; font-family: var(--mono); }
/* mirando: la página no responde, sólo el cartel. Probando: el velo se retira y la página vuelve a ser tuya */
.tut.probando { pointer-events: none; }
.tut.probando .tut-cartel { pointer-events: auto; }

.tut-velo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .45s ease; }
.tut-velo path { fill: rgba(3, 6, 8, .78); }
.tut.probando .tut-velo { opacity: 0; }

/* el marco: señala la zona que se explica, también mientras se prueba */
.tut-marco {
  position: absolute; display: none; box-sizing: border-box; border-radius: 10px; pointer-events: none;
  border: 1.5px solid var(--fosforo); box-shadow: 0 0 0 1px rgba(92, 242, 154, .25), 0 0 28px rgba(92, 242, 154, .22);
  animation: tut-latido 2.4s ease-in-out infinite;
}
@keyframes tut-latido { 50% { box-shadow: 0 0 0 1px rgba(92, 242, 154, .15), 0 0 12px rgba(92, 242, 154, .10); } }

/* lo que señala el cursor guía en el veredicto */
.tut-senalado { outline: 1px solid var(--fosforo); outline-offset: 4px; border-radius: 4px; background: rgba(92, 242, 154, .06); transition: outline-color .3s ease; }

/* el gesto de pasar por encima, cuando lo hace el cursor guía */
.mano-fichas .polo.apagado.tut-encendido { background: rgba(3, 6, 8, .3); color: var(--t); }
.mano-fichas .polo.apagado.tut-encendido::before, .mano-fichas .polo.apagado.tut-encendido::after { color: var(--l); }

/* la glosa: un panel translúcido sobre la zona, con su rótulo y un brillo que la cruza en diagonal */
.tut-glosa {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; border-radius: 10px;
  border: 1px solid rgba(92, 242, 154, .22);
  /* sin opacity en el panel: con ella el desenfoque se mezcla con lo nítido y el texto no se lee */
  background: linear-gradient(160deg, rgba(22, 44, 36, .84), rgba(6, 12, 15, .90) 60%);
  backdrop-filter: blur(6px) saturate(1.1);
  transition: opacity .45s ease, box-shadow .45s ease, border-color .45s ease, background-color .45s ease;
}
.tut-glosa::before {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 48%, transparent 58%);
  transform: translateX(-30%); transition: transform 1.4s ease; pointer-events: none;
}
.tut-glosa.activa { border-color: var(--fosforo); box-shadow: 0 0 0 1px rgba(92, 242, 154, .35), 0 0 36px rgba(92, 242, 154, .18); }
.tut-glosa.activa::before { transform: translateX(30%); }
.tut-glosa b { position: relative; font-size: 1.25rem; font-weight: 600; color: var(--texto-suave); letter-spacing: .02em; transition: color .45s ease; }
.tut-glosa span { position: relative; max-width: 30ch; font-size: .8rem; line-height: 1.55; color: var(--texto-suave); transition: color .45s ease; }
.tut-glosa.activa b { color: #fff; }
.tut-glosa.activa span { color: var(--texto); }
.tut.probando .tut-glosa { opacity: 0; }

/* el cartel */
.tut-cartel {
  position: absolute; box-sizing: border-box; width: min(400px, calc(100vw - 32px));
  padding: 16px 20px 16px; border-radius: 10px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(14, 23, 27, .86); backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  color: var(--texto);
}
.tut-cartel.ancho { width: min(620px, calc(100vw - 32px)); }
.tut-cartel.estrecho { width: min(310px, calc(100vw - 32px)); }
.tut-cartel h3 { margin: 8px 0 6px; font-size: 1rem; font-weight: 600; color: #fff; }
.tut-texto { margin: 0; font-size: .82rem; line-height: 1.6; }
.tut-medio:empty { display: none; }
.tut-medio { margin-top: 14px; }
.tut-medio video { display: block; width: 100%; max-height: 60vh; border-radius: 6px; background: #000; border: 1px solid var(--linea); }
.tut-medio iframe { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; border: 1px solid var(--linea); border-radius: 6px; background: #000; }
.tut-progreso { display: flex; align-items: center; gap: 5px; }
.tut-progreso i { width: 18px; height: 3px; border-radius: 2px; background: var(--gris); }
.tut-progreso i.hecho { background: var(--linea-fuerte); }
.tut-progreso i.ahora { background: var(--fosforo); }
.tut-progreso span { margin-left: 8px; font-size: .68rem; letter-spacing: .08em; color: var(--texto-suave); }
.tut-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tut-acciones button.enlace { margin-right: auto; color: var(--texto-suave); }
.tut-acciones button.enlace:hover { color: var(--texto); }
.tut-acciones button.primario { background: var(--fosforo); color: var(--fondo); border-color: var(--fosforo); font-weight: 600; }
.tut-acciones button.primario:hover { background: #7ff7b0; }

/* la copia fantasma de la pieza que arrastra el cursor guía */
.tut-fantasma { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)); }
.tut-fantasma.visible { opacity: .92; }
.tut-fantasma > * { margin: 0 !important; width: 100%; box-sizing: border-box; }

/* el cursor guía */
.tut-cursor {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -3px 0 0 -5px;
  opacity: 0; transform: translate(50vw, 60vh);
  transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .25s ease;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .65)); pointer-events: none;
}
.tut-cursor.visible { opacity: 1; }
.tut-cursor.agarra path { fill: var(--fosforo); }
.tut-cursor path { fill: #fff; stroke: var(--fondo); stroke-width: 1.3; stroke-linejoin: round; }

/* la invitación de la primera visita, dentro del diálogo de inicio */
.tut-invitacion {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--fosforo); border-radius: 6px; background: rgba(92, 242, 154, .07);
}
.tut-invitacion p { flex: 1; margin: 0; font-size: .78rem; line-height: 1.5; color: var(--texto-suave); }
.tut-invitacion p b { display: block; margin-bottom: 2px; font-size: .9rem; color: #fff; }
.tut-invitacion .acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tut-velo, .tut-glosa, .tut-glosa::before, .tut-cursor { transition: none !important; }
  .tut-marco { animation: none; }
}