/* La Aventura del Saber — Introducción vertical (8 escenas).
   Solo opera en teléfonos en retrato; la composición de PC queda intacta.
   Las imágenes aprobadas siguen siendo las mismas. */
@media screen and (max-width: 600px) and (orientation: portrait) {
  #introduccionV3.introAventuraV6 {
    box-sizing: border-box !important;
    padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
  #introduccionV3 .introV6Stage {
    --madera: url('imagenes/intro-v6/marco_1.webp');
    flex: 0 0 auto;
    position: relative !important;
    width: min(94vw, 450px) !important;
    height: min(82dvh, 740px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    border: clamp(6px, 1.7vw, 9px) solid #965028 !important;
    border-radius: 23px !important;
    box-sizing: border-box !important;
    background: #ddbe82 !important;
    box-shadow: 0 12px 28px rgba(22,12,16,.38), inset 0 0 0 3px #e39c43 !important;
    isolation: isolate;
    overflow: visible !important;
    contain: layout style;
    transform: none !important;
  }
  /* Reutilizamos la cabecera ilustrada y el pie originales sin estirar
     el título: se pintan a escala proporcional y se recortan únicamente
     las zonas de madera que forman el borde del panel vertical. */
  #introduccionV3 .introV6Stage::before,
  #introduccionV3 .introV6Stage::after {
    content: '';
    position: absolute;
    left: -7px;
    right: -7px;
    z-index: 38;
    pointer-events: none;
    background-image: var(--madera);
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  #introduccionV3 .introV6Stage::before {
    top: -9px;
    height: clamp(57px, 18vw, 83px);
    background-position: center top;
  }
  #introduccionV3 .introV6Stage::after {
    bottom: -9px;
    height: clamp(26px, 7vw, 37px);
    background-position: center bottom;
  }
  #introduccionV3 .introV6Stage[data-escena='bienvenida'] { --madera: url('imagenes/intro-v6/marco_1.webp'); }
  #introduccionV3 .introV6Stage[data-escena='explora'] { --madera: url('imagenes/intro-v6/marco_2.webp'); }
  #introduccionV3 .introV6Stage[data-escena='aventura'] { --madera: url('imagenes/intro-v6/marco_3.webp'); }
  #introduccionV3 .introV6Stage[data-escena='recompensa'] { --madera: url('imagenes/intro-v6/marco_4.webp'); }
  #introduccionV3 .introV6Stage[data-escena='estilo'] { --madera: url('imagenes/intro-v6/marco_5.webp'); }
  #introduccionV3 .introV6Stage[data-escena='nombre'] { --madera: url('imagenes/intro-v6/marco_6.webp'); }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] { --madera: url('imagenes/intro-v6/marco_7.webp'); }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] { --madera: url('imagenes/intro-v6/marco_8.webp'); }

  #introduccionV3 .introV6Marco { display: none !important; }
  #introduccionV3 .introV6Clip,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Clip {
    position: absolute !important;
    inset: clamp(53px, 15.5vw, 70px) 3px 8px 3px !important;
    background: #f6e1b6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 0 2px rgba(86,39,11,.20) !important;
  }
  #introduccionV3 .introV6Pergamino { opacity: .86 !important; }
  #introduccionV3 .introV6Fondo { opacity: .60 !important; }
  #introduccionV3 .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena='explora'] .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena='aventura'] .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena='recompensa'] .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena='estilo'] .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6Pose {
    left: 18% !important;
    bottom: auto !important;
    top: 22% !important;
    width: 64% !important;
    height: 35% !important;
    object-position: center bottom !important;
    z-index: 5 !important;
  }
  #introduccionV3 .introV6Titulo,
  #introduccionV3 .introV6Stage[data-escena] #introV6Titulo,
  #introduccionV3 .introV6Stage[data-escena='bienvenida'] .introV6Titulo {
    position: absolute !important;
    left: 3% !important;
    right: auto !important;
    top: 3.5% !important;
    width: 94% !important;
    height: 19% !important;
    transform: none !important;
    object-fit: contain !important;
    z-index: 11 !important;
  }
  #introduccionV3 .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena] .introV6Panel {
    left: 3% !important;
    right: auto !important;
    top: 55% !important;
    width: 94% !important;
    height: 26% !important;
    transform: none !important;
    object-fit: contain !important;
    z-index: 12 !important;
  }
  /* Paneles 2-5 incluyen márgenes transparentes originales alrededor del
     texto. Ampliamos SOLO el elemento dentro del marco, no toda la escena. */
  #introduccionV3 .introV6Stage[data-escena='explora'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='aventura'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='recompensa'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='estilo'] .introV6Panel {
    top: 53% !important;
    height: 29% !important;
    transform: scale(1.25) !important;
    transform-origin: center center !important;
  }
  #introduccionV3 .introV6Nav,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Nav {
    z-index: 35 !important;
    left: 6% !important;
    right: auto !important;
    top: auto !important;
    bottom: 5.7% !important;
    width: 88% !important;
    height: 8.2% !important;
    display: block !important;
    pointer-events: none !important;
  }
  #introduccionV3 .introV6NavBtn {
    width: 43% !important;
    height: 100% !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  #introduccionV3 .introV6Anterior { left: 0 !important; right: auto !important; }
  #introduccionV3 .introV6Siguiente { right: 0 !important; left: auto !important; }
  #introduccionV3 .introV6Progreso,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Progreso {
    z-index: 37 !important;
    left: 16% !important;
    right: auto !important;
    bottom: 1.6% !important;
    width: 68% !important;
    height: 3.0% !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  #introduccionV3 .introV6Puntos { gap: 5px !important; }
  #introduccionV3 .introV6Punto { width: 8px !important; height: 8px !important; }
  #introduccionV3 .introV6Contador { font-size: 11px !important; }
  #introduccionV3 .introV6Cerrar {
    z-index: 50 !important;
    right: -10px !important;
    top: -14px !important;
    width: 40px !important;
    height: 40px !important;
  }
  #introduccionV3 .introV6DecoWrap { left: -1% !important; bottom: -1% !important; width: 19% !important; height: 12% !important; }
  #introduccionV3 .introV6Stage[data-escena='recompensa'] .introV6DecoWrap { width: 20% !important; height: 13% !important; }

  /* Nombre — ajustamos la zona interactiva al cartel móvil. */
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6NombrePanel {
    left: 5% !important;
    right: auto !important;
    top: 56% !important;
    width: 90% !important;
    height: 23% !important;
    object-fit: contain !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre {
    left: 21% !important;
    right: auto !important;
    top: 66.2% !important;
    width: 58% !important;
    height: 6% !important;
    font-size: 15px !important;
    text-align: center !important;
    padding: 0 6px !important;
  }
  #introduccionV3 .introV6InputNombre::placeholder {
    font-size: 12px !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6CandadoNombre {
    left: auto !important;
    right: 7% !important;
    top: 56% !important;
    width: 12% !important;
  }

  /* Dificultades: botones apilados; conservan los estados seleccionados,
     los bloqueos y los archivos originales. */
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Fondo,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Pergamino {
    display: block !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DificultadWrap {
    top: 24% !important;
    left: 6% !important;
    right: auto !important;
    width: 88% !important;
    height: 52% !important;
    transform: none !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DificultadBase { display: none !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifBtn {
    top: 0 !important;
    left: 23% !important;
    right: auto !important;
    width: 54% !important;
    height: 33% !important;
    max-height: 33% !important;
    transform: none !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifAventura { top: 33% !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifDesafio { top: 66% !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifImg { object-fit: contain !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6AvisoDificultad {
    left: -2% !important;
    right: auto !important;
    top: 100% !important;
    width: 104% !important;
    height: 22% !important;
    object-fit: contain !important;
  }

  /* Iniciemos: nombre centrado y aviso sobre botones. */
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6FinalNombrePanel {
    left: 6% !important;
    right: auto !important;
    top: 53% !important;
    width: 88% !important;
    height: 17% !important;
  }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6NombreConfirmado {
    left: 19% !important;
    right: auto !important;
    top: 60% !important;
    width: 62% !important;
    height: 5% !important;
    transform: none !important;
    font-size: clamp(16px, 5vw, 22px) !important;
    text-align: center !important;
  }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6Listo {
    left: 12% !important;
    right: auto !important;
    top: 70% !important;
    width: 76% !important;
    height: 10% !important;
  }
}

/* Teléfonos de poca altura: el marco siempre cabe sin desbordarse. */
@media screen and (max-width: 600px) and (orientation: portrait) and (max-height: 690px) {
  #introduccionV3 .introV6Stage { height: 88dvh !important; }
  #introduccionV3 .introV6Pose { top: 22% !important; height: 32% !important; }
}

/* En pantallas muy estrechas el texto de ayuda cabe dentro del cartel. */
@media screen and (max-width: 350px) and (orientation: portrait) {
  #introduccionV3 .introV6InputNombre::placeholder {
    font-size: 10px !important;
  }
}

/* =============================================================
   AJUSTE MÓVIL 2 — 11/10/2026
   Se aplica después de la adaptación vertical inicial.
   No modifica los artes originales ni el diseño de escritorio.
   ============================================================= */
@media screen and (max-width: 600px) and (orientation: portrait) {
  #introduccionV3.introAventuraV6 {
    padding: max(8px, env(safe-area-inset-top, 0px)) 6px
             max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
  #introduccionV3 .introV6Stage {
    width: min(94vw, 430px) !important;
    height: min(88dvh, 745px) !important;
    max-height: calc(100dvh - 16px) !important;
    background: #f4ddae !important;
    border-color: #965327 !important;
  }
  /* Los extremos del marco horizontal siguen siendo imágenes originales;
     el cuerpo vertical no los deforma ni muestra cortes internos. */
  #introduccionV3 .introV6Stage::before {
    height: clamp(60px, 18vw, 82px) !important;
  }
  #introduccionV3 .introV6Stage::after {
    height: clamp(26px, 7.8vw, 38px) !important;
  }
  #introduccionV3 .introV6Clip,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Clip {
    inset: clamp(54px, 18vw, 78px) 5px 13px !important;
    border-radius: 8px 8px 10px 10px !important;
    box-shadow: none !important;
  }
  /* Misma retícula para las ocho pantallas: encabezado / personaje /
     información / navegación. Sin aumentar los PNG fuera del marco. */
  #introduccionV3 .introV6Titulo,
  #introduccionV3 .introV6Stage[data-escena] #introV6Titulo {
    left: 3% !important;
    right: auto !important;
    top: 2.3% !important;
    width: 94% !important;
    height: 19.5% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
  #introduccionV3 .introV6Pose,
  #introduccionV3 .introV6Stage[data-escena] .introV6Pose {
    top: 21.5% !important;
    bottom: auto !important;
    left: 18% !important;
    width: 64% !important;
    height: 31% !important;
    object-position: center bottom !important;
  }
  #introduccionV3 .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='explora'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='aventura'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='recompensa'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='estilo'] .introV6Panel {
    top: 52.5% !important;
    left: 3% !important;
    right: auto !important;
    width: 94% !important;
    height: 30.5% !important;
    object-fit: contain !important;
    transform: none !important;
  }
  #introduccionV3 .introV6Stage[data-escena='bienvenida'] .introV6Panel {
    top: 55% !important;
    height: 25% !important;
  }
  #introduccionV3 .introV6Nav,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Nav {
    left: 5.5% !important;
    width: 89% !important;
    height: 8.8% !important;
    min-height: 44px !important;
    bottom: 4.4% !important;
  }
  #introduccionV3 .introV6NavBtn {
    width: 45% !important;
    min-height: 44px !important;
    height: 100% !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #introduccionV3 .introV6Progreso,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Progreso {
    left: 16% !important;
    bottom: 0.8% !important;
    width: 68% !important;
    height: 3.1% !important;
  }
  #introduccionV3 .introV6DecoWrap {
    left: 0% !important;
    bottom: -0.5% !important;
    width: 16% !important;
    height: 10% !important;
  }
  #introduccionV3 .introV6Stage[data-escena='recompensa'] .introV6DecoWrap {
    width: 17% !important;
    height: 10% !important;
  }
  /* Nombre escrito sobre el área interior del cartel, sin zoom de Safari. */
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6NombrePanel {
    top: 55% !important;
    left: 5% !important;
    width: 90% !important;
    height: 24% !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre {
    top: 65.5% !important;
    left: 23% !important;
    width: 54% !important;
    height: 6.2% !important;
    min-height: 36px !important;
    font-size: 16px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6CandadoNombre {
    top: 58% !important;
    right: 8% !important;
  }
  /* El modo de dificultad presenta tres opciones una debajo de otra. */
  #introduccionV3 .introV6Stage[data-escena='dificultad'] #introV6Titulo {
    left: 3% !important;
    top: 2% !important;
    width: 94% !important;
    height: 19% !important;
    transform: none !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DificultadWrap {
    top: 23.7% !important;
    left: 5% !important;
    width: 90% !important;
    height: 48% !important;
    transform: none !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifBtn {
    left: 22% !important;
    width: 56% !important;
    height: 33% !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifApoyo { top: 0 !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifAventura { top: 33% !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifDesafio { top: 66% !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6AvisoDificultad {
    left: -3% !important;
    top: 99% !important;
    width: 106% !important;
    height: 20% !important;
  }
  /* Confirmación: la placa, nombre y llamada a comenzar comparten eje. */
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6FinalNombrePanel {
    left: 5% !important;
    top: 52.5% !important;
    width: 90% !important;
    height: 18% !important;
  }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6NombreConfirmado {
    left: 20% !important;
    top: 59% !important;
    width: 60% !important;
    height: 6% !important;
    font-size: clamp(16px, 5vw, 21px) !important;
  }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6Listo {
    left: 13% !important;
    top: 72.5% !important;
    width: 74% !important;
    height: 9% !important;
  }
}

/* En móviles muy bajos, incluidos los que abren el teclado, mantener
   accesibles el nombre y los botones sin hacer zoom de toda la interfaz. */
@media screen and (max-width: 600px) and (orientation: portrait) and (max-height: 650px) {
  #introduccionV3 .introV6Stage { height: min(91dvh, 590px) !important; }
  #introduccionV3 .introV6Pose { height: 29.5% !important; }
}
@media screen and (max-width: 600px) and (orientation: portrait) and (max-height: 500px) {
  #introduccionV3.introAventuraV6 { overflow-y: auto !important; align-items: flex-start !important; }
  #introduccionV3 .introV6Stage {
    height: 490px !important;
    max-height: none !important;
    margin: 8px auto 12px !important;
  }
}
@media screen and (max-width: 350px) and (orientation: portrait) {
  #introduccionV3 .introV6Stage { width: 94vw !important; }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre {
    left: 22% !important;
    width: 56% !important;
  }
}

/* No dejar sobresalir detrás del diálogo el mando de eliminar perfiles.
   El modo de eliminación y su estado se conservan, solo se oculta mientras
   la introducción está abierta. */
body.introV6Abierta #botonEliminarPerfilV3 { visibility: hidden !important; }