/* ==========================================================================
   ARREGLOS FINALES DEL MOVIL  (se carga EL ULTIMO, asi nadie lo pisa)
   13/10 - Arregla en TODAS las paginas:
     - el boton de idioma "ES", que se estiraba y ocupaba una fila entera
     - el texto del logo, que se cortaba ("WORLD OF WARCRAFT . LE...")
     - el boton ENTRAR, que se montaba encima del logo
   ========================================================================== */
@media (max-width: 900px) {

  .cabecera, .cabecera * { box-sizing: border-box !important; }

  .cabecera .cabecera-fila {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .4rem .5rem !important;
  }

  /* El logo: entero y sin cortarse */
  .cabecera .marca,
  .cabecera .marca-texto { flex: 0 1 auto !important; min-width: 0 !important; }
  .cabecera .marca-texto strong {
    font-size: 1.12rem !important;
    white-space: nowrap !important;
    display: block !important;
  }
  .cabecera .marca-texto span {
    font-size: .54rem !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* El boton de idioma: PEQUEÑO y sin estirarse NUNCA */
  .cabecera .cajaIdioma,
  .cabecera .selectorIdioma,
  .cabecera [class*="idioma"],
  .cabecera [class*="Idioma"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: center !important;
  }
  .cabecera .selectorIdioma,
  .cabecera button[class*="idioma"],
  .cabecera button[class*="Idioma"] {
    padding: .32rem .6rem !important;
    font-size: .74rem !important;
    gap: .25rem !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .cabecera .selectorIdioma .idiBandera,
  .cabecera [class*="idioma"] .idiBandera { width: 18px !important; height: 12px !important; }

  /* El boton de entrar y el panel de usuario: sin estirarse ni montarse */
  .cabecera [class*="usuario"],
  .cabecera [class*="sesion"],
  .cabecera [class*="panel"],
  .cabecera a[class*="boton"],
  .cabecera button[class*="boton"] {
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: center !important;
    white-space: nowrap !important;
  }

  /* Que ningun elemento de la cabecera se salga de la pantalla */
  .cabecera { overflow: visible !important; }
}

/* ==========================================================================
   SIN VIDEOS DE FONDO EN EL MOVIL (13/10)  -  HECHO BIEN
   Se quitan SOLO las capas del video, que son absolutas y no ocupan sitio.
   LA SECCION NO SE TOCA de posicion: asi el texto y el hueco quedan igual.
   ========================================================================== */
@media (max-width: 900px) {

  /* Solo las capas del video */
  .seccion-video-fondo,
  .portada-video,
  .yt-caja,
  .seccion-video-fondo iframe,
  .portada-video iframe,
  .yt-caja iframe {
    display: none !important;
  }

  /* El velo oscuro ya no hace falta (no habia video debajo) */
  .seccion-video-velo,
  .portada-velo { display: none !important; }

  /* La seccion se queda con un fondo oscuro bonito.
     OJO: NO se toca su "position": solo el alto minimo y el fondo. */
  .seccion-video,
  .seccion-video-cabecera {
    min-height: 0 !important;
    padding: 2.6rem 0 2.4rem !important;
    background:
      radial-gradient(900px 420px at 50% 0%, rgba(200,162,74,.13), transparent 70%),
      linear-gradient(160deg, #0a0e14 0%, #12161d 55%, #0d1117 100%) !important;
  }
  .seccion-video > .contenedor { position: relative !important; z-index: 2 !important; }

  /* El fondo de reserva de la portada (la imagen) tampoco hace falta */
  .portada-video { background-image: none !important; }
}

/* ==========================================================================
   LOS VIDEOS .MP4, QUE NO SE SALGAN DE LA PANTALLA (13/10)
   En tablet habia un video de 783px en una pantalla de 768px.
   Solucion: que quepan siempre, SIN quitarles la caja (para no dejar huecos).
   ========================================================================== */
@media (max-width: 1100px) {

  video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  /* Y su caja tambien */
  .caja-video, .video-caja, [class*="video"] {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* Los videos de FONDO (esos si se quitan, que son absolutos y no dejan hueco) */
  .portada-video video,
  .seccion-video-fondo video,
  .video-fondo video,
  video.fondo,
  video[autoplay][muted][loop] {
    display: none !important;
  }
}

/* ==========================================================================
   ARREGLO DEL DESBORDE DE /apoyar EN EL MOVIL (13/10)
   Las cajas de ejemplo (.apDemoFila/.apDemoEtiqueta/.apDemoCaja) median 354px
   empezando en x=42, o sea acababan en 396 en una pantalla de 390.
   ========================================================================== */
@media (max-width: 900px) {
  .apDemoFila, .apDemoEtiqueta, .apDemoCaja,
  [class*="apDemo"] {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ==========================================================================
   EL MENU DEL MOVIL NO SE PUEDE CORTAR  (13/10)
   Fallo encontrado mirando una captura: al abrir el menu con el boton ☰,
   solo se veia "INICIO" y los otros 8 enlaces quedaban cortados.
   La causa: yo habia puesto "overflow-x: clip" en la cabecera, y eso recorta
   tambien el menu al abrirse.
   ========================================================================== */
@media (max-width: 900px) {

  .cabecera { overflow: visible !important; }

  /* Cuando el menu se abre, que se vea ENTERO */
  .cabecera .navegacion,
  .cabecera .navegacion.abierto,
  .cabecera .navegacion.abierta,
  .cabecera .navegacion.visible,
  .cabecera .navegacion.activo {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  .cabecera .navegacion.abierto,
  .cabecera .navegacion.abierta,
  .cabecera .navegacion.visible {
    display: block !important;
    width: 100% !important;
    padding: .5rem 0 !important;
  }
  .cabecera .navegacion.abierto a,
  .cabecera .navegacion.abierta a,
  .cabecera .navegacion.visible a {
    display: block !important;
    width: 100% !important;
    padding: .7rem .8rem !important;
    font-size: .95rem !important;
    white-space: normal !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(248,183,0,.12) !important;
  }
}

/* ==========================================================================
   EL MENU DEL MOVIL EN COLUMNA  (13/10)  -  FALLO GORDO
   Que pasaba: al abrir el menu con el boton ☰, los 9 enlaces se ponian
   UNO AL LADO DE OTRO, y como cada uno ocupa el 100% del ancho, todos se
   salian de la pantalla y SOLO SE VEIA "INICIO". No se podia navegar.
   Solucion: ponerlo EN COLUMNA (uno debajo de otro), con su scroll vertical.
   Se usa una regla MAS ESPECIFICA que la del programa, para ganarle.
   ========================================================================== */
@media (max-width: 900px) {

  .cabecera.mvAbierto .navegacion,
  .cabecera .navegacion.mvAbierto,
  .cabecera.mvAbierto nav.navegacion {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 68vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: .4rem .5rem !important;
    gap: 0 !important;
    background: #0a0e14 !important;
    border-top: 1px solid rgba(248,183,0,.35) !important;
    border-bottom: 1px solid rgba(248,183,0,.35) !important;
    -webkit-overflow-scrolling: touch;
  }

  .cabecera.mvAbierto .navegacion > a,
  .cabecera.mvAbierto .navegacion > li,
  .cabecera .navegacion.mvAbierto > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    text-align: left !important;
    padding: .85rem .9rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(248,183,0,.14) !important;
    box-sizing: border-box !important;
  }
  .cabecera.mvAbierto .navegacion > a:last-child,
  .cabecera.mvAbierto .navegacion > li:last-child { border-bottom: 0 !important; }

  /* Y que la cabecera no recorte el menu */
  .cabecera { overflow: visible !important; }
}

/* ==========================================================================
   ARREGLO DE LOS 3 DESBORDES  (13/10)
   Causas exactas medidas por el auditor:

   1) /apoyar en movil (6px a 390): el culpable NO era el ancho, era que
      .apDemoCaja tiene width:100% MAS 16px de relleno a cada lado
      -> ocupa el 100% + 32px y se sale.
   2) clasificacion y foro: 47px de scroll a 1024px (portatil pequeño).
      Culpables: el boton del chat (usuarioBoton) y su etiqueta (chatEtiqueta),
      que acaban en x=1071 con una pantalla de 1024.
   3) personaje: 11px de scroll a 768px. Culpable: .objeto-pie.
   ========================================================================== */

/* --- 1) LA CAJA DE EJEMPLO DE /apoyar --- */
@media (max-width: 900px) {
  .apDemoFila {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .apDemoFila > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .apDemoCaja,
  .apDemoEtiqueta {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: .6rem .7rem !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    display: block !important;
  }
}

/* --- 2) EL BOTON DEL CHAT, QUE NO EMPUJE LA PAGINA (1024px) --- */
@media (max-width: 1200px) {
  .usuarioBoton,
  .boton.usuarioBoton,
  .chatEtiqueta,
  .chat-soporte .chatEtiqueta,
  #chatSoporte .chatEtiqueta {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* La etiqueta de texto del chat: mejor esconderla en pantallas justas */
  .chatEtiqueta { display: none !important; }
  .usuarioBoton { right: 12px !important; max-width: calc(100vw - 24px) !important; }
}

/* --- 3) LA FICHA DE PERSONAJE (768px) --- */
@media (max-width: 860px) {
  .objeto-pie,
  .objeto-pie * ,
  [class*="objeto-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .objeto-pie { width: auto !important; }
}