@media (max-width: 768px) {

  #screen {
    padding: 20px 14px 40px;
  }

  #fondo33 {
    font-size: 18rem;
    opacity: 0.08;
  }

  #pageTitle {
    gap: 10px;
    margin-bottom: 30px;
  }

  .tituloPagina {
    font-size: 2.4rem;
  }

  .subtitulo {
    font-size: 0.7rem;
    letter-spacing: 2px;
  }

  .botonVolver {
    padding: 8px 16px;
    font-size: 0.75rem;
  }

  #contenedor {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .caja {
    padding: 18px;
    box-shadow: 5px 5px 0 var(--morado);
  }

  .tituloCaja {
    font-size: 1.3rem;
  }

  .parrafo {
    font-size: 0.85rem;
  }

  .ficha strong {
    min-width: 80px;
    font-size: 0.7rem;
  }

  .galeriaDiscos {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .discoTitulo {
    font-size: 0.75rem;
  }

  .discoArtista {
    font-size: 0.55rem;
  }

  .discoDesc {
    font-size: 0.55rem;
  }

  /* Texto "pasá el mouse" vs "tocá cada disco" */
  .notaEscritorio {
    display: none;
  }

  .notaMobile {
    display: block;
  }

  /* Stickers */
  .stickerSimbolo {
    width: 70px;
    bottom: -16px;
    right: -8px;
  }

  /* Sticker photocard — al final del flujo, centrado */
  .stickerPhotocard {
    position: static;
    width: 120px;
    margin: -40 0 auto 0;
    transform: rotate(-8deg);
    display: block;
  }

  .stickerMascaraAlt {
    position: static;
    width: 100px;
    margin: 10px auto 0;
    transform: rotate(-8deg);
    display: block;
  }

  #pie {
    padding-top: 20px;
    margin-top: 30px;
  }

  .codigoBarras {
    width: 200px;
    height: 36px;
  }

  .pieTexto {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-align: center;
  }
}

/* En escritorio, ocultamos la nota mobile */
@media (min-width: 769px) {
  .notaMobile {
    display: none;
  }
}