.btn-luz:hover {
background: #D8FF41!important;
color:black!important
}

.btn-luz2:hover {
background: #2D2D2D!important;
color:white!important;
}

.btn-luz2:hover .flecha path {
  fill: white!important; /* o el color que quieras */
}

.btn-luz:hover .flecha2 path {
  fill: black!important; /* o el color que quieras */
}


.card-hover {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  color: white;
}

.card-hover img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.card-hover .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.card-hover .overlay span {
  font-size: 18px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.card-hover:hover img {
  transform: scale(1.05);
}

.card-hover:hover .overlay {
  opacity: 1;
}

.card-hover:hover .overlay span {
  opacity: 1;
  transform: translateY(0);
}