/* Estilo para la imagen de fondo */
.corazon::before {
  content: "";
  position: fixed;
  bottom: 20%;
  right: 0; /* Posiciona la imagen en la esquina derecha */
  width: 200px; /* Ajusta el ancho de la imagen de fondo */
  height: 300px; /* La imagen cubre toda la altura del contenedor */
  background-image: url('./assets/img/Corazon.png'); /* Cambia por tu imagen */
  background-repeat: no-repeat;
  background-size: cover; /* Ajusta para cubrir la altura del contenedor */
  z-index: 0; /* Envía la imagen al fondo del contenedor */
}

/* Estilo para el contenido */
.galeria {
  position: relative; /* Asegura que el contenido esté encima de la imagen de fondo */
  padding: 20px;
  z-index: 0; /* Coloca el contenido sobre la imagen de fondo */
}

/* ********************* */
/* Estilo de la galería */
/* ******************** */
.galeria {
  column-count: 3;
  column-gap: 10px;
  padding: 20px;
}

/* Estilo de las imágenes */
.galeria img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;  
  transition: transform 0.2s ease;
  break-inside: avoid;
}

/* Efecto al pasar el ratón sobre la imagen */
.galeria img:hover {
  transform: scale(1.02);
}

/* Estilos para el modal */
/* Estilo para el modal */
.modal {
  display: none; /* Inicialmente oculto */
  position: fixed; /* Lo posiciona de forma fija en la pantalla */
  top: 0;
  left: 0;
  width: 100%; /* Ancho completo de la pantalla */
  height: 100%; /* Alto completo de la pantalla */
  background-color: rgba(0, 0, 0, 0.9); /* Fondo negro con opacidad media */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  z-index: 2000; /* Asegura que el modal esté por encima de todo lo demás */
  overflow: hidden; /* Evita el desplazamiento en la ventana */
}

/* Estilo para el contenedor de la imagen dentro del modal */
.modal-content {
  display: flex; /* Usamos flexbox para centrar la imagen */
  justify-content: center; /* Centra la imagen horizontalmente */
  align-items: center; /* Centra la imagen verticalmente */
  background-color: transparent; /* Fondo transparente para el contenedor de la imagen */
  width: 100%; /* Asegura que el contenedor tenga el 100% del ancho disponible */
  height: 100%; /* Asegura que el contenedor tenga el 100% del alto disponible */
  position: relative; /* Asegura que el contenedor de la imagen sea relativo */
  margin: auto; /* Centra el contenedor dentro del modal */
  overflow: hidden; /* Evita que la imagen sobresalga del contenedor */
}

/* Estilo de la imagen dentro del modal */
#modal-image {
  max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
  max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
  object-fit: contain; /* Mantiene la proporción de la imagen sin deformarla */
  margin: auto; /* Usa margen automático para centrar la imagen si es más pequeña que el contenedor */
}


/* Estilo para los botones de navegación */
.prev, .next {
  position: absolute;
  top: 50%; /* Centra verticalmente */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  color: white;
  font-size: 30px;
  border: none;
  padding: 16px;
  cursor: pointer;
  z-index: 10; /* Asegura que los botones estén encima de la imagen */
  transition: background-color 0.3s;
}

.prev {
  left: 10px; /* Coloca el botón "anterior" en la parte izquierda */
  transform: translateY(-50%); /* Ajusta para centrar verticalmente */
}

.next {
  right: 10px; /* Coloca el botón "siguiente" en la parte derecha */
  transform: translateY(-50%); /* Ajusta para centrar verticalmente */
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Cambio de fondo al pasar el ratón */
}

/* Estilo para el contenedor de cada imagen */
.imagen {
  position: relative;
}

/* Estilo para el botón de apertura del modal */
.open-modal-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;  /* El botón está inicialmente en esta posición */
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.5); /* Fondo blanco con algo de transparencia */
  border: none;
  border-radius: 50%; /* Hace el botón circular */
  transition: opacity 0.3s ease, right 0.3s ease, background-color 0.2s ease; /* Transición para la opacidad y el desplazamiento */
  cursor: pointer;
  opacity: 0;  /* El botón está invisible por defecto */
}

/* Cuando el mouse pasa sobre el contenedor de la imagen, se muestra el botón y se desplaza */
.imagen:hover .open-modal-btn {
  opacity: 1;  /* El botón se vuelve visible */
  right: 30px; /* Desplaza el botón 20px hacia la izquierda */
  background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco sólido cuando aparece */
}

/* Cambio de color al pasar el ratón sobre el botón */
.open-modal-btn:hover {
  background-color: #ffffff !important; /* Fondo blanco sólido al pasar el ratón sobre el botón */
  opacity: 1;  /* Asegura que el botón se mantenga visible */
}


/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .galeria {
    column-count: 2;
  }
  .modal-content {
    width: 95%; /* Establece un ancho más pequeño en pantallas pequeñas */
    max-height: 90%; /* Limita la altura al 90% en pantallas más pequeñas */
  }

  #modal-image {
    width: 100%;
    height: auto;
    max-height: 80vh; /* Limita la altura de la imagen en pantallas pequeñas */
  }

  /* Asegura que la X esté visible en pantallas pequeñas */
  .close {
    top: 5px; /* Reduce la distancia desde la parte superior */
    right: 5px; /* Reduce la distancia desde la derecha */
    font-size: 30px; /* Ajusta el tamaño de la X para pantallas pequeñas */
  }  
}

@media (max-width: 480px) {
  .galeria {
    column-count: 1;
  }
}


/* Estilo para el botón de cerrar */
.close {
  position: absolute;
  top: 10px;
  right: 10px; /* Asegura que esté en la esquina superior derecha */
  color: white;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000; /* Asegura que la X esté por encima del contenido */
  transition: color 0.3s ease;
}

.close:hover {
  color: #f1f1f1; /* Cambia el color al pasar el ratón */
}