/* Estilos para el modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija */
  z-index: 1; /* Encima de todo */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  overflow: hidden; /* Elimina el scroll */
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente */
}

/* Contenido del modal */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* Centrado verticalmente */
  padding: 20px;
  border: 1px solid #888;
  width: 33.33%; /* Ocupa 1/3 del ancho de la pantalla */
  max-width: 500px; /* Ancho máximo para pantallas grandes */
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box; /* Incluye padding y border en el ancho */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuye el espacio verticalmente */
  min-height: 400px; /* Altura mínima para asegurar espacio */
  position: relative; /* Necesario para posicionar la "x" */
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
  .modal-content {
      width: 80%; /* Ocupa más espacio en pantallas pequeñas */
      margin: 20% auto; /* Ajuste del margen superior */
  }
}

/* Espacio para la imagen */
.modal-image img {
  width: 100%;
  max-width: 100%; /* La imagen se ajusta al ancho del modal */
  height: auto;
  border-radius: 10px;
}

/* Información debajo de la imagen */
.modal-info {
  margin-top: 20px;
  flex-grow: 1; /* Ocupa el espacio restante */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuye el espacio verticalmente */
}

.modal-info h2 {
  margin-bottom: 10px;
  font-size: 24px;
}

.modal-info p {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px; /* Espacio antes del botón */
}

/* Estilos para el botón */
.modal-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF; /* Color de fondo del botón */
  color: white; /* Color del texto */
  text-decoration: none; /* Quita el subrayado del enlace */
  border-radius: 5px; /* Bordes redondeados */
  font-size: 16px;
  transition: background-color 0.3s ease; /* Transición suave */
}

.modal-button:hover {
  background-color: #0056b3; /* Cambia el color al pasar el mouse */
}

/* Botón para cerrar el modal */
.close {
  color: #aaa;
  position: absolute; /* Posiciona la "x" en la esquina superior derecha */
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}