.dist-tarjetas-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: auto;
}

.dist-tarjetas-wrapper h2 {
  margin-top: 20px;
  color: #0070B2;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.dist-tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.dist-tarjeta-item {
  width: 270px;
  height: 114.658px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
  transition: transform 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
  
   
}

.dist-tarjeta-item:hover {
  transform: scale(1.05);
}

.dist-tarjeta-icon img {
  width: 28.451px;
  height: 29.589px;
  margin-bottom: 10px;
}

.dist-tarjeta-content h3 {
  color: #0070B2;
  font-family: "Helvetica Light", Arial, sans-serif;
  font-size: 15px;
  margin-bottom: 10px;
}

/* CSS para el hover */
.dist-tarjeta-hover {
 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(237, 237, 237, 0.9);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  
  padding-left: 30px;
  padding-top: 5px;
  
}

/* .dist-tarjeta-item:hover .dist-tarjeta-hover {
  display: none;
} */


.dist-tarjeta-hover .option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%; /* Para que ocupe todo el ancho */
  padding: 10px; /* Añadir padding para mejor separación */
  
  
}

.dist-tarjeta-hover .option img {
  width: 42px;
height: 25px;
  margin-right: 10px;
}

.dist-tarjeta-hover .option span {
  font-size: 16px;
  color: #000;
  flex-grow: 1; /* Para que el texto ocupe todo el espacio restante */
}

.dist-tarjeta-hover .option a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}



@media only screen and (max-width: 768px) {
  .dist-tarjetas {
    display: flex;
    flex-wrap: nowrap; /* Cambiado de wrap a nowrap para evitar que las tarjetas se envuelvan */
   justify-content: flex-start;
    width: 100%; /* Ajusta el ancho al 100% */
    overflow-x: scroll; /* Permite el desplazamiento horizontal */
    white-space: nowrap; /* Evita que las tarjetas se envuelvan en una nueva línea */
    scroll-snap-type: x mandatory; /* Añade un desplazamiento suave */
    scrollbar-width: none;
    padding: 20px; /* Agrega un padding opcional para mejorar la apariencia */
    margin-top: 20px;
   
  }
  .dist-tarjetas::-webkit-scrollbar {
  display: none;  /* Oculta la barra de desplazamiento en Chrome, Safari y Opera */
}
  .dist-tarjeta-item {
    flex: 0 0 auto; /* Asegura que las tarjetas no se estiren */
    margin-right: 10px; /* Añade un margen entre las tarjetas */
  }
  .dist-tarjeta-item:hover {
    transform: none;
  }
}