/* ============================================================================
   movil-voidcube.css — hace que voidcube.studio se pueda usar en el móvil.

   NO CAMBIA EL DISEÑO. No toca colores, ni tipografías, ni la estructura, ni
   nada de lo que se ve en escritorio. Solo evita que los elementos se salgan
   de una pantalla estrecha, que era el motivo real de la cortina.

   Qué había: la web se tapaba entera por debajo de 770px con un cartel de
   "Mobile view is temporarily unavailable". Detrás no había nada roto salvo
   cinco elementos más anchos que la pantalla (un vídeo de 468px, imágenes de
   550px, la rejilla de modpacks de 554px) que quedaban cortados, y un título
   de 96px que ocupaba un tercio de la pantalla.

   Va en un fichero aparte a propósito: se quita borrando su <link> del HTML y
   la web vuelve exactamente a como estaba.
   ========================================================================= */

@media (max-width: 770px) {

  /* La cortina. Lo demás de este fichero es lo que hace que quitarla no duela. */
  .taparMobile { display: none !important; }

  /* Nada puede ser más ancho que la pantalla. Esta es la regla que arregla
     los cinco elementos que se salían. */
  img,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* El vídeo del hero conserva su proporción en vez de recortarse por los lados. */
  video {
    width: 100% !important;
    object-fit: cover;
  }

  /* Las letras del logotipo del hero: 410px en una pantalla de 390. */
  .imgLetras {
    max-width: 92% !important;
    height: auto !important;
  }

  /* La rejilla de modpacks pasa a una columna. Es lo único que cambia de
     disposición, y es lo que hace cualquier web al estrecharse. */
  .contenidoModpacks {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .contenidoModpacks > *,
  .imagen {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* El título del hero: 96px ocupaban 288px de alto, un tercio de la pantalla
     solo para el nombre. Se escala con el ancho, sin bajar de lo legible. */
  .medio h1,
  .hero h1 {
    font-size: clamp(2.5rem, 13vw, 4.5rem) !important;
    line-height: 1.05 !important;
    word-break: break-word;
  }

  /* Cinturón y tirantes: si algo se escapa, que no provoque scroll lateral. */
  html, body { overflow-x: hidden; }

  /* Objetivos táctiles: por debajo de 32px cuesta acertar con el dedo.
     No cambia cómo se ven, solo amplía la zona sensible. */
  a, button, [role="button"] { min-height: 32px; }
}