.mensaje-aniversario-spt {
	align-items: center;
	animation: entradaAniversarioSPT .6s ease-out;
	display: flex;
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .28));
	flex-direction: column;
	left: 50%;
	pointer-events: none;
	position: fixed;
	top: 12vh;
	transform: translateX(-50%);
	z-index: 100000;
}

.mensaje-aniversario-spt.saliendo {
	animation: salidaAniversarioSPT .7s ease-in forwards;
}

.numero-aniversario-spt {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 12px;
	max-width: 90vw;
}

.numero-globo-spt {
	align-items: center;
	animation: flotarGloboSPT 1.8s ease-in-out infinite alternate;
	background: linear-gradient(145deg, #fff 0%, var(--color-primario, #ff6b00) 32%, var(--color-primario, #ff6b00) 100%);
	border: 3px solid rgba(255, 255, 255, .85);
	border-radius: 48% 48% 45% 45%;
	box-shadow: inset 14px 10px 16px rgba(255, 255, 255, .35), inset -10px -12px 18px rgba(110, 27, 0, .2);
	color: #fff;
	display: flex;
	font-size: 68px;
	font-weight: 800;
	height: 105px;
	justify-content: center;
	line-height: 1;
	position: relative;
	text-shadow: 0 3px 3px rgba(0, 0, 0, .25);
	width: 82px;
}

.numero-globo-spt:nth-child(even) {
	animation-delay: .18s;
	background: linear-gradient(145deg, #fff 0%, var(--color-secundario, #f5a623) 32%, var(--color-secundario, #f5a623) 100%);
}

.numero-globo-spt::after {
	border-bottom: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 14px solid var(--color-primario, #d84b2b);
	bottom: -12px;
	content: "";
	height: 0;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 0;
}

.numero-globo-spt:nth-child(even)::after {
	border-top-color: var(--color-secundario, #d98c00);
}

.letras-aniversario-spt {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	max-width: 90vw;
}

.letra-globo-spt {
	align-items: center;
	background: var(--color-primario, #ff5b00);
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 48%;
	box-shadow: inset 5px 5px 7px rgba(255, 255, 255, .3), 0 4px 7px rgba(0, 0, 0, .2);
	color: #fff;
	display: flex;
	font-size: 20px;
	font-weight: 800;
	height: 42px;
	justify-content: center;
	text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
	width: 35px;
}

.letra-globo-spt:nth-child(3n+2) {
	background: var(--color-secundario, #e49a08);
}

.letra-globo-spt:nth-child(3n) {
	background: var(--color-terciario, #171717);
}

.espacio-globo-spt {
	width: 12px;
}

.detalle-anuncio-spt {
	background: rgba(255, 255, 255, .9);
	border-radius: 14px;
	color: var(--color-terciario, #202020);
	font-size: 18px;
	font-weight: 700;
	margin-top: 12px;
	max-width: 620px;
	padding: 5px 14px;
	text-align: center;
}

.detalle-anuncio-spt:empty {
	display: none;
}

.mensaje-aniversario-spt.sin-globos .numero-globo-spt,
.mensaje-aniversario-spt.sin-globos .letra-globo-spt {
	animation: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	height: auto;
	padding: 4px 8px;
	width: auto;
}

.mensaje-aniversario-spt.sin-globos .numero-globo-spt::after {
	display: none;
}

@keyframes entradaAniversarioSPT {
	from { opacity: 0; transform: translate(-50%, -35px) scale(.72); }
	to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes salidaAniversarioSPT {
	to { opacity: 0; transform: translate(-50%, -18px) scale(.9); }
}

@keyframes flotarGloboSPT {
	from { transform: translateY(0) rotate(-2deg); }
	to { transform: translateY(-8px) rotate(2deg); }
}

@media (max-width: 576px) {
	.numero-globo-spt {
		font-size: 52px;
		height: 82px;
		width: 62px;
	}

	.letras-aniversario-spt {
		gap: 2px;
	}

	.letra-globo-spt {
		font-size: 15px;
		height: 34px;
		width: 27px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mensaje-aniversario-spt,
	.numero-globo-spt {
		animation: none;
	}
}