body{
  background: linear-gradient(to bottom, #00c6ff, #0072ff);
  min-height: 100vh;
  margin: 0;
  position: relative;      /* crea el contexto */
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("media/patron.png");
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: .48;
  pointer-events: none;
  z-index: 0;              /* <- detrás */
}

/* asegúrate de poner el canvas por encima */
canvas{
  position: relative;      /* para que z-index surta efecto */
  z-index: 1;              /* <- delante del ::before */
  display: block;
  margin: 0 auto;
  border: 8px solid #fff;
  border-radius: 8px;
  box-shadow:
    0 0 0 rgba(0,0,0,.35),
    0 9px 0 9px rgba(0,0,0,.2),
    inset 0 10px 20px rgba(0,0,0,.20),
    inset 0 -8px 16px rgba(0,0,0,.15);
}

/* Solo desktop/laptop: mantener borde y sombras */
@media (hover: hover) and (pointer: fine){
  canvas{ border-width: 10px; }
}

/* móviles */
@media (hover: none) and (pointer: coarse){
  body::before{ opacity: 0; }
  canvas{ border: none; box-shadow: none; border-radius: 0; }
}