@keyframes pulse {

	0%,
	to {
		box-shadow: 0 0 20px rgba(11, 224, 61, .14)
	}

	50% {
		box-shadow: 0 0 28px 10px rgba(11, 224, 61, .28)
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg)
	}
}

@keyframes respiracion {

	0%,
	to {
		transform: scale(1)
	}

	50% {
		transform: scale(1.025)
	}
}

@keyframes pulse2 {

	0%,
	to {
		box-shadow: inset 0 0 6px #9affb9cc, 0 0 8px #19b34a, 0 0 16px #19b34a80, 0 0 28px #19b34a40;
		transform: scale(1)
	}

	50% {
		box-shadow: inset 0 0 10px #c4ffd8, 0 0 14px #19b34a, 0 0 28px #19b34acc, 0 0 44px #19b34a80;
		transform: scale(1.08)
	}
}

:root {
	--fontPrincipal: "Sarabun", sans-serif;
	--blanco: #fff;
	--dorado: gold;
	--verde: #25d366;
	--verde-osc: #208320;
	--sombra-texto: 1px 1px 2px #000, 0 0 5px orange, 0 0 10px gold
}

*,
::after,
::before {
	box-sizing: border-box
}

html {
	font-size: 62.5%
}

body {
	margin: 0;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	overflow-x: hidden;
	  background: radial-gradient(circle at 50% 20%, rgb(0, 0, 0) 0%, #000 100%);
	color: var(--blanco);
	font: 200 italic 2rem/1.35 var(--fontPrincipal)
}
body::after {
  content: "";
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 220px;
  background: radial-gradient(
    circle at center,
    rgba(255, 238, 0, 0.55) 0%,
    rgba(255, 217, 0, 0.15) 35%,
    rgba(255, 208, 0, 0.05) 65%,
    transparent 100%
  );
  filter: blur(60px);
  z-index: 0;
  animation: blueglow 5s ease-in-out infinite alternate;
}
@keyframes blueglow {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25);
  }
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }
}

.jugar {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	width: min(90%, 920px);
	margin-inline: auto;
	cursor: default
}

.aviso strong {
	color: var(--dorado);
	text-shadow: var(--sombra-texto);
	font-weight: 700
}

.aviso {
	text-shadow: #fff 0 0 5px, #fff 0 0 10px, #fff 0 0 15px, #ffd900 0 0 20px, #ffd900 0 0 30px, #ffd900 0 0 40px, #ff2d95 0 0 50px, #ff2d95 0 0 75px, 2px 2px 2px transparent;
	margin: 0 0 1rem;
	animation: respiracion 2.2s ease-in-out infinite
}

.aviso_juegos1 {
	font-size: 2.2rem;
	margin-top: .2rem;
	font-style: normal
}

.center-wrapper,
.super-button {
	align-items: center;
	justify-content: center
}

.center-wrapper {
	display: flex;
	width: 100%
}

.super-button {
	position: relative;
	width: 40%;
	display: inline-flex;
	gap: 1.2rem;
	padding: 2rem 4.2rem;
	margin: 1rem;
	background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
	border: 2px solid rgba(255, 255, 255, .2);
	border-radius: 100px;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: .5px;
	cursor: pointer;
	overflow: hidden;
	transition: all .4s ease-in-out;
	box-shadow: 0 0 20px rgba(23, 247, 2, .1);
	backdrop-filter: blur(8px);
	animation: pulse 2.2s ease-in-out infinite;
	z-index: 1
}

.super-button::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(from 0deg, #25d366, #128c7e, #075e54, #25d366);
	animation: rotate 4s linear infinite;
	z-index: -2
}

.super-button::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: #208320;
	border-radius: inherit;
	z-index: -1
}

.super-button:hover {
	transform: scale(1.05);
	box-shadow: 0 0 40px rgba(0, 255, 255, .2)
}

.bi-whatsapp {
	width: 22px;
	height: 22px;
	transition: transform .3s ease-in-out;
	color: #00ff5e
}

.bonus-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: -3rem auto 2rem;
	padding: 1rem 2rem;
	width: fit-content;
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(60, 0, 90, .445), rgba(120, 0, 120, .445));
	box-shadow: 0 0 16px rgba(128, 0, 128, .6)
}

.bonus-icon {
	width: 60px;
	height: auto;
	flex-shrink: 0
}

.bonus-text {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 700;
	color: gold;
	text-shadow: 1px 1px 2px #000;
	text-align: center
}

.beneficios li,
.imagenes {
	display: flex;
	align-items: center
}

.imagenes {
	flex-direction: column;
	gap: 1.2rem
}

.imagen {
	width: 16rem;
	margin: 0 0 .5rem;
	padding: 0
}

.beneficios {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px
}

.beneficios li {
	font-family: "Sarabun", sans-serif;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: .5px;
	text-transform: uppercase;
	background: linear-gradient(180deg, #f6d68a, #b98a3e);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	gap: 1.2rem
}

.bullet {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: none;
	background: radial-gradient(circle at 50% 50%, #baffc9 0 45%, #19b34a 46% 100%);
	box-shadow: inset 0 0 6px #9affb9cc, 0 0 8px #19b34a, 0 0 16px #19b34a80, 0 0 28px #19b34a40;
	animation: pulse2 1.8s ease-in-out infinite
}

@media (max-width:900px) {
	body {
		background-position: top center
	}
}

@media (max-width:768px) {
	.jugar {
		margin-top: 8rem
	}

	.imagen {
		width: 17rem;
		margin-top: -14.6rem;
		margin-bottom: -1rem
	}

	.aviso_juegos1 {
		margin-bottom: 5rem
	}

	.super-button {
		width: 80%;
		font-size: 2.7rem;
		padding: 2.1rem;
		margin: 1rem 0 2rem
	}

	.bonus-text {
		font-size: 1.4rem
	}

	.aviso-img {
		margin-top: -2.1rem;
		width: 56%
	}
}

@media (min-width:1900px) {
	.imagen {
		width: 30rem
	}

	.aviso {
		font-size: 7rem
	}

	.super-button {
		font-size: 2.6rem
	}
}