[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body {
  background: #ececec;
  overflow: hidden;
  user-select: none;
}

#Button {
  width: 120px; height: 120px;
  font-size: 28px; 
  text-align: center; 
  line-height: 120px; 
/*  background: #e74c3c;  */
  background-image: url('../imagenes/mundo_mapa_azul.png'); 
  background-size: cover; /* Opcional: Ajusta el tamaño de la imagen al div */
  background-position: center; /* Opcional: Centra la imagen */

  border-radius: 50%;
  color: #ececec;
  cursor: pointer;
  z-index: 1;
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde la parte inferior según necesites */
  left: 50%;
  transform: translateX(-50%);
}

.menu-button-container { /* Contenedor opcional para el botón */
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde la parte inferior según necesites */
  left: 50%;
  transform: translateX(-50%);
  /* Opcional: estilos adicionales para el botón */
  background-color: #333;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

/* Estilos para el div contenedor principal */
.Nav-Tile {
  width: 60vw; /* 50% del ancho del viewport */
  aspect-ratio: 1 / 1; /* Asegura que sea cuadrado (relación ancho/alto = 1) */
  position: fixed; /* Lo fija en la pantalla para centrarlo fácilmente */
  top: 10%;
  left: 25%;
/*   transform: translate(-50%, -50%); Centra perfectamente el div */
  display: grid; /* Lo convierte en un contenedor de cuadrícula */
  grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas iguales */
  grid-template-rows: repeat(2, 1fr); /* Crea 2 filas iguales */
  border: 1px solid #ccc; /* Opcional: para visualizar el borde del contenedor */
  transform: scale(0);
  transition: transform 0.8s;
  background-color: #fff;
  box-shadow: 0px 0px 10px #999;
  z-index: 1;
}

.policia {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 302px;
height: 302px;
font-size: 0;
/*   transform: scale(0);
transition: transform 0.8s;
box-shadow: 0px 0px 10px #999;  
  background-image: url('../imagenes/policia_stop.png'); */
  background-size: cover; /* Opcional: Ajusta el tamaño de la imagen al div */
  background-position: center; /* Opcional: Centra la imagen */

z-index: 0;
}


.active {
  transform: scale(1);
}

.invisible {
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* Estilos para cada div del mosaico */
.mosaico {
  display: flex; /* Para centrar el contenido dentro */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  /* Opcional: para visualizar los bordes de cada mosaico */
  /* border: 1px dotted lightgray; */
}

/* Estilos para el enlace <a> */
.mosaico a {
  display: flex; /* Para centrar la imagen dentro del enlace */
  justify-content: center;
  align-items: center;
  width: 100%; /* Ancho de la imagen */
  height: 100%; /* Alto de la imagen */
  text-decoration: none; /* Opcional: quitar subrayado del enlace */
  background-color: #000;
}

/* Estilos para la imagen <img> */
.mosaico a img {
  max-width: 100%; /* Asegura que la imagen no exceda el ancho del enlace */
  max-height: 100%; /* Asegura que la imagen no exceda el alto del enlace */
  margin: 10px; /* Crea un margen alrededor de la imagen para centrarla */
}
canvas { position: absolute; }

/* Media query para pantallas más grandes (desktops) */
@media (min-width: 768px) { /* Por ejemplo, para pantallas de 768px de ancho o más */
  .Nav-Tile {
 /*    width: 300px;      Ancho fijo más pequeño para desktop */
 /*    height: 300px;      Alto fijo correspondiente para mantenerlo cuadrado */
    /* O podrías usar un porcentaje fijo del viewport pero menor */
     width: 30vh; /*  */
     height: 30vh; /* */
  }

}