/* Tutorial: cabecera y navegación visibles; solo el contenido se desplaza. */
#modalInteractiveTutorial .tutorial-container {
  max-height: min(92vh, 920px);
  max-height: min(92dvh, 920px);
  overflow: hidden;
}
#modalInteractiveTutorial .tutorial-header,
#modalInteractiveTutorial .stepper-nav,
#modalInteractiveTutorial .tutorial-footer { flex-shrink: 0; }
#modalInteractiveTutorial .tutorial-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#modalInteractiveTutorial .tutorial-slide { min-width: 0; overflow-wrap: anywhere; }
#modalInteractiveTutorial .tutorial-mockup-box { min-width: 0; }
#modalInteractiveTutorial .tutorial-mockup-box > div { flex-wrap: wrap; }
#modalInteractiveTutorial .tutorial-mockup-box > div > div { min-width: 0; }
#modalInteractiveTutorial .tutorial-btn { min-height: 44px; justify-content: center; }
#modalInteractiveTutorial .tutorial-close-btn { min-width: 44px; min-height: 44px; }
#modalInteractiveTutorial .step-chip { min-height: 44px; flex-shrink: 0; }
#modalInteractiveTutorial button:focus-visible { outline: 2px solid #f5d996; outline-offset: 2px; }
@media (max-width: 600px) {
  #modalInteractiveTutorial { padding: max(0.4rem, env(safe-area-inset-top)) 0.4rem max(0.4rem, env(safe-area-inset-bottom)) !important; }
  #modalInteractiveTutorial .tutorial-container { max-height: 96vh; max-height: 96dvh; border-radius: 12px; }
  #modalInteractiveTutorial .tutorial-header { padding: 0.6rem 0.65rem; gap: 0.25rem; }
  #modalInteractiveTutorial .tutorial-brand { gap: 0.4rem !important; min-width: 0; }
  #modalInteractiveTutorial .tutorial-brand > div > span:last-child { font-size: 0.64rem !important; letter-spacing: 0 !important; }
  #modalInteractiveTutorial .step-counter { font-size: 0.7rem; white-space: nowrap; margin-right: 0; }
  #modalInteractiveTutorial .stepper-nav { padding: 0.4rem 0.6rem; }
  #modalInteractiveTutorial .tutorial-body { padding: 1rem 0.85rem; }
  #modalInteractiveTutorial .tutorial-slide-h2 { font-size: 1.25rem; line-height: 1.3; }
  #modalInteractiveTutorial .tutorial-slide-desc { font-size: 0.88rem; margin-bottom: 1rem; }
  #modalInteractiveTutorial .tutorial-feature-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  #modalInteractiveTutorial .tutorial-mockup-box { padding: 0.75rem; }
  #modalInteractiveTutorial .tutorial-footer { padding: 0.65rem; gap: 0.4rem; flex-wrap: wrap; }
  #modalInteractiveTutorial .tutorial-footer > div { flex: 1; justify-content: flex-end; gap: 0.35rem !important; }
  #modalInteractiveTutorial .tutorial-btn { padding: 0.5rem 0.6rem; font-size: 0.78rem; }
  #modalInteractiveTutorial .tutorial-btn-ghost { max-width: 35%; }
  #modalInteractiveTutorial .tutorial-pity-bar { flex-wrap: wrap; }
  #modalInteractiveTutorial .tutorial-pity-bar .tutorial-bar-track { flex-basis: 100%; order: 1; }
}
@media (max-height: 500px) {
  #modalInteractiveTutorial .tutorial-header { padding-block: 0.3rem; }
  #modalInteractiveTutorial .stepper-nav { padding-block: 0.1rem; }
  #modalInteractiveTutorial .tutorial-footer { padding-block: 0.3rem; }
}

#modalInteractiveTutorial .tutorial-header { flex-wrap: wrap; }
#modalInteractiveTutorial .tutorial-language-row { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-top: 0.45rem; }
#modalInteractiveTutorial .tutorial-language-row label { color: #cbd5e1; font-size: 0.8rem; }
#modalInteractiveTutorial #tutorialLangSelect { width: 145px; min-height: 40px; font-size: 0.85rem; padding: 0.4rem 0.6rem; }