@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.2rem;
  }

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

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

  .seccion {
    padding: 18px;
    margin-bottom: 50px;
    overflow: visible;
  }

  .tituloSeccion {
    font-size: 1.6rem;
  }

  .subtituloSeccion {
    font-size: 0.7rem;
    margin-bottom: 20px;
  }

  .grillaPiezas {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 18px;
  }

  .piezaGrande,
  .piezaAlta,
  .piezaEnorme {
    grid-column: auto;
    grid-row: auto;
  }

  .pieza           { aspect-ratio: 1 / 1; }
  .piezaHorizontal { aspect-ratio: 4 / 3; }
  .piezaVertical   { aspect-ratio: 3 / 4; }

  .listaRecomendaciones {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .recoTitulo {
    font-size: 1rem;
  }

  .recoDesc {
    font-size: 0.8rem;
  }

  /* STICKERS */
  .stickerMaquina {
    width: 70px;
    top: 50px;
    left: -05px;
    right: auto;
  }

  .stickerSimbolo {
    width: 70px;
    top: -40px;
    right: -15px;
    left: auto;
    bottom: auto;
  }

  /* Marquee más rápido */
  .marquee {
    padding: 8px 0;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .marqueeContenido {
    animation-duration: 10s;
  }

  .blinky {
    font-size: 0.85rem;
  }

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

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

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