/* Estilos para el modal */
.modal {
  display: none;
  position: fixed !important;
  z-index: 0.1;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.938);
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}


.modal-content {
  width: 80%; /* Reducción del 10% */
  max-width: 600px; /* Establece un ancho máximo */
  max-height: 80%; /* Reducción del 10% */
  text-align: center; /* Centra el contenido */
  background-color: #ffffff00; /* Color de fondo */
  position: relative; /* Se añade posición relativa para centrar verticalmente */
  border-radius: 8px; /* Bordes redondeados */
  padding: 50px 2rem 2rem 2rem !important; /* Espaciado interno */
  display: flex !important; /* Usamos flexbox para centrar verticalmente */
  flex-direction: column !important; /* Alineamos el contenido en columna */
  justify-content: center !important; /* Centramos verticalmente */
  margin: 0 auto;
}


.modal-content img {
  max-width: 100%; /* La imagen ocupa todo el ancho disponible */
  height: auto; /* Se ajusta automáticamente la altura */
  display: block; /* Cambio a block para centrar correctamente */
  margin: 0 auto; /* Centra horizontalmente la imagen */
  border-radius: 10px;
}

/* Estilos para el botón de cerrar */
.close {
  color: #aaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: rgb(138, 11, 11);
  text-decoration: none;
  cursor: pointer;
}