/* --- CONFIGURACIÓN BASE DEL BOTÓN --- */
.saha-drive-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  text-decoration: none !important;
  font-family: 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 20;

  /* POSICIÓN Y ESTADO INICIAL (OCULTO) */
  position: absolute;
  top: 20px;
  right: 20px;
  opacity: 0; /* Invisible */
  visibility: hidden; /* No clickable cuando está oculto */
  transform: translateY(-15px); /* Un poco desplazado hacia arriba */

  /* TRANSICIÓN SUAVE DE APARICIÓN */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- LA MAGIA: APARICIÓN AL HACER HOVER EN LA TARJETA --- */
/* Cuando pasas el mouse sobre la tarjeta... el botón aparece */
.single-project-card:hover .saha-drive-btn {
  opacity: 1; /* Visible */
  visibility: visible; /* Clickable */
  transform: translateY(0); /* Vuelve a su sitio original */
}

/* --- ESTILOS INTERNOS DEL BOTÓN (Igual que antes) --- */
.saha-drive-icon-box {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 4px;
}

.saha-drive-img {
  width: 18px;
  height: auto;
  filter: grayscale(100%); /* Blanco y negro */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.saha-drive-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: left;
}

.saha-action {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 2px;
}

.saha-platform {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

/* --- ANIMACIÓN INTERNA AL PASAR MOUSE SOBRE EL BOTÓN --- */
.saha-drive-btn:hover {
  background-color: #000;
  border-color: #fff;
  transform: translateY(0) scale(1.05); /* Crece un poquito */
}

.saha-drive-btn:hover .saha-drive-img {
  filter: grayscale(0%); /* Vuelven los colores */
  transform: scale(1.1) rotate(5deg);
}