@media (max-width: 768px) {

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

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

  /* ENCABEZADO: el logo manda, después fila sticker+sello */
  #pageTitle {
    gap: 16px;
    margin-bottom: 30px;
    padding-top: 20px;
  }

  .logo,
  .logoPlaceholder {
    max-width: 350px;
    position: relative;
    z-index: 5;
    order: 1;
  }

  /* En mobile, el contenedor se vuelve flex y pone
     sticker + sello uno al lado del otro */
  .filaStickerSello {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    order: 2;
  }

  /* Sticker máscara: en mobile en flujo normal */
  .stickerLogo {
    position: relative;
    width: 90px;
    top: auto;
    left: auto;
    margin: 0;
    transform: rotate(-10deg);
    display: block;
  }

  /* Sello postal: en mobile en flujo normal */
  .selloPostal {
    position: relative;
    width: 90px;
    height: 90px;
    top: auto;
    right: auto;
    margin: 0;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-10deg);
  }

  .selloPostal::before {
    inset: 6px;
  }

  .selloTexto {
    padding: 0 8px;
  }

  /* Redes: al final */
  #links {
    order: 3;
  }

  .buttonicon {
    width: 40px;
    height: 40px;
  }

  .buttonicon svg {
    width: 18px;
    height: 18px;
  }

  /* MENÚ PRINCIPAL: 1 columna */
  #mainMenu {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "musica"
      "blog"
      "about"
      "artefactos";
    gap: 18px;
    margin-bottom: 40px;
  }

  .menuBox {
    min-height: 200px;
    padding: 20px;
    transform: rotate(0) !important;
  }

  .tituloCaja {
    font-size: 2.4rem;
  }

  .cajaBlog .tituloCaja,
  .cajaAbout .tituloCaja {
    font-size: 2rem;
  }

  /* Foto de SOBRE MÍ: foco un poco más abajo */
  .cajaAbout::before {
    background-position: center 30%;
  }

  .stickerCaja {
    width: 90px;
    bottom: -16px;
    right: -8px;
  }

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

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

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