@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif !important;
}
.figure button:hover {
  cursor: none;
}

#infinite-slider {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

#infinite-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Modal hidden state */
#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  height: calc(100vh - 40px); /* Altura de la pantalla menos 20px de cada lado */
  background-color: #1a1a1a; /* Fondo del modal */
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.95);
  transition: all 0.3s ease-in-out;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

#modal::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Modal visible state */
#modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Fondo negro semitransparente */
#modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fondo negro con opacidad */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

/* Mostrar el fondo cuando el modal está activo */
#modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Fade negro al final del modal */
#modal::after {
  content: "";
  position: fixed; /* Cambiado a fixed */
  bottom: 20px; /* Ajusta según el padding del modal */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px); /* Ajusta según el padding horizontal */
  height: 40px; /* Altura del fade */
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0), #1a1a1a);
  pointer-events: none; /* Permite interactuar con el contenido debajo */
  z-index: 30; /* Asegúrate de que esté por encima del contenido */
}

/* Cambiar el cursor al hacer hover sobre los proyectos */
.project {
  cursor: pointer;
}

/* Contenido desplazable del modal */
.modal-content {
  overflow-y: auto;
  height: calc(100% - 40px); /* Ajusta para dejar espacio al degradado */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
  scroll-behavior: smooth; /* Scroll suave para el contenido del modal */
}

.modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Ocultar scrollbars en todos los modales */
.modal {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

.modal::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Ocultar scrollbars en elementos con overflow-scroll dentro de modales */
.modal .overflow-scroll,
.modal .overflow-y-auto {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

.modal .overflow-scroll::-webkit-scrollbar,
.modal .overflow-y-auto::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Degradado fijo al final del modal */
.modal-fade {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0), #1a1a1a);
  height: 40px; /* Altura del degradado */
  pointer-events: none; /* Permite interactuar con el contenido debajo */
}
/* Bloquear el scroll de la página */
.no-scroll {
overflow: hidden;
}

#modal-description img, #modal-description video{
  border-radius: 1rem;
  /* margin: auto; */
  height: auto;
  margin: 1rem auto !important;
}

#modal-description p{
  margin: 1rem 0rem !important;
}