/* Estilo para el contenedor de premios */
#contenedor-premios {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.966); /* Fondo semi-transparente para el contenedor */
  position: fixed; /* Para que cubra toda la pantalla */
  top: 70px;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100; /* Asegura que esté por encima de otros elementos */
  display: none; /* Oculto por defecto */
  overflow-y: auto; /* Para permitir el deslizamiento si el contenido excede la pantalla */
}

/* Estilo cuando el contenedor de premios está visible */
#contenedor-premios.mostrar-premios {
  display: flex;
}

/* Estilo para la lista de premios usando CSS Grid */
.premios-lista {
  display: grid; /* Usamos Grid en lugar de flex */
  grid-template-columns: 1fr; /* Solo una columna */
  justify-items: center; /* Centra los ítems horizontalmente */
  align-items: center; /* Centra los ítems verticalmente */
  max-height: 90vh; /* Limita la altura de la lista de premios */
  overflow-y: auto; /* Permite el deslizamiento de los ítems */
  width: 100%;
  gap: 20px; /* Espacio entre los ítems */
}

/* Estilo para cada ítem de premio */
.premio-item {
  width: 100%; /* Hace que los ítems tomen el 100% del ancho del contenedor */
  max-width: 500px; /* Limita el tamaño máximo de los ítems */
  text-align: center;
}

.premio-imagen {
  width: 100%;
  height: auto;
}