/** @format */



body {

  position: initial;

  background-color: hsl(280, 90%, 5%);

}



/* Hace que el div ocupe toda la pantalla */

.full-screen {

  max-width: 100vw;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding-top: 50px;

  -webkit-backdrop-filter: blur(50px);

  /* Add this line first, it fixes blur for Safari*/

}



.ait2 {

  border-radius: 28px;

  background: #f6e8fb;

  margin: 48px auto;

  padding: 60px 16px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}



img.ai {

  max-width: 350px;

  display: inline-block;

}



canvas {

  position: absolute !important;

  top: 0px;

  left: 0px;

  width: 100vw;

  min-height: 100vh;

  z-index: -1000 !important;

}



.ait h1 {

  font-size: 22px;

  font-weight: 600;

  background: linear-gradient(30deg, #ffc115, #ff49b9, #d24bff);

  /* background: linear-gradient(90deg, #ff7700, #ff009d, #9900ff); para fondo claro*/

  -webkit-text-fill-color: transparent;

  -webkit-background-clip: text;

  display: inline-block;

}



.ait h2 {

  color: #fff;

  font-weight: 500;

  font-size: 20px;

  padding: 0 16vw;

  line-height: normal;

}



.boton.ait {

  background: linear-gradient(120deg, #ffab02, #ff009d, #9900ff);

  color: #fff;

  box-shadow: #ff00b2 0px 1px 1px;

  transition: 0.4s;

  padding: 9px 21px 9px 10px;

  font-size: 22px;

  margin-top: 20px;

  border-radius: 16px;

}



.boton.ait:hover {

  box-shadow: #ff00b2 0px 1px 16px;

}



#TryButton {

  padding: 9px 22px 9px 18px;

  border-radius: 50px;

  border: none;

  cursor: pointer;

  color: #fff;

  background: linear-gradient(120deg, #ffab02, #ff009d, #9900ff);

  font-family: "Raleway", sans-serif;

  font-size: 18px;

  font-weight: 500;

  margin: 26px 16px 16px 0;

  transition: all 2s;

  position: relative;

}



#TryButton:hover {

  filter: hue-rotate(-360deg);

  transition: all 2s;

}



#TryButton:active {

  filter: hue-rotate(720deg);

  transition: 0s;

}



#TryButton::before {

  content: "";

  z-index: -1;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: linear-gradient(120deg, #ffab02, #ff009d, #9900ff);

  transform: scale(1.15, 1.3);

  filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: inherit;

  opacity: 0;

  transition: opacity 1s;

}



#TryButton:hover::before {

  opacity: 1;

}



#TryButton:hover::after {

  content: "";

  z-index: -1;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}



/* .price-toggle {

	margin-bottom: 20px;

	text-align: center;

} */



.price-toggle button {

  font-family: "Raleway";

  font-weight: 600;

  margin-right: 8px;

  cursor: pointer;

  border: none;

  background-color: #bbb;

  color: #fff;

  padding: 8px 12px;

  border-radius: 50px;

  transition: background-color 0.3s;

}



.price-toggle button:hover {

  background-color: #000;

}



.price-toggle button.active {

  background-color: #f70;

}



.price-content {

  text-align: center;

  padding: 20px;

  margin: 0 auto;

}