.card:hover {
    transform: scale(1.1);
}
.card.activados {
    /* transform: scale(1.05); */
    background: #efefef;
    border-radius: 10px;
    padding: 10px;
}


.ui-btn {
  margin-top: 15px;
  box-sizing: border-box;
  padding: 12px 28px 12px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  font-family: Menlo,Roboto Mono,monospace;
  background-image: linear-gradient(60deg, #25d366 0%, #126831 100%);
  border: none;
  cursor: pointer;
  transition: .3s;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.137);
  /* position: absolute; */
}

.title .ui-btn {
  position: absolute;
}
  
  
.ui-btn span {
  letter-spacing: .1rem;
  transition: .3s;
  box-sizing: border-box;
  position: relative;
}
  
.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover span, .ui-btn:focus span {
  color: white;
}
  
.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both 1.2s;
}
  
@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}
  
.hover\:shadow-hover:hover {
  box-shadow: 0 8px 30px -4px hsla(140, 84%, 56%, 0.096);
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(0, 0) rotate(0) skew(0) skewY(0) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transition-smooth {
  transition: all .3s cubic-bezier(.4,0,.2,1);
}

.gradient-card {
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 14% 96%));
  background: var(--gradient-card);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.text-card-foreground {
  color: hsl(215 25% 27%);
}
.bg-card {
  background-color: hsl(0 0% 100%);
}
.border-border\/50 {
  border-color: hsl(220 13% 91% / .5);
}
.text-muted-foreground {
  color: #292929bf
}

.bg-primary {
  background-color:#25d366;
}

.bg-background {
  background-color: hsl(0 0% 100%);
}

.border-input {
  border-color: hsl(220 13% 91%);
}

.hover\:text-primary-foreground:hover {
  color: #fff;
}

.hover\:bg-primary:hover {
  background-color: #25d366;
}

.gradient-primary {
    background: linear-gradient(132deg, #25d366 20%, #126831 100%);
}

.min-w-\[300px\].max-w-\[350px\].bg-white.rounded-xl.shadow-lg.overflow-hidden.flex.flex-col {
    border: 1px #e1e1e1 solid;
}