/* ============================================================
   Jambo Summer Adventure — tokens y utilidades compartidas
   Paleta del flyer: teal profundo + turquesa + lima + crema
   ============================================================ */
:root {
	--jsa-deep: #084c5c;
	--jsa-teal: #0d7489;
	--jsa-teal-soft: #12879e;
	--jsa-card: #0a3f4d;
	--jsa-turq: #35d0e8;
	--jsa-turq-soft: #7ee3f2;
	--jsa-lime: #8dc63f;
	--jsa-lime-deep: #6fa82e;
	--jsa-cream: #f6f2e3;
	--jsa-white: #ffffff;
	--jsa-sun: #ffd44d;
	--jsa-coral: #ff7a59;
	--jsa-font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
	--jsa-font-body: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
	--jsa-radius: 26px;
	--jsa-shadow-pop: 0 10px 0 rgba(0, 0, 0, .18);
	--jsa-shadow-float: 0 18px 44px rgba(4, 40, 50, .35);
}

/* Blob orgánico reutilizable (radios asimétricos = forma de gota viva) */
.jsa-blob {
	position: absolute;
	border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
	pointer-events: none;
	will-change: transform;
	animation: jsa-breathe 9s ease-in-out infinite;
}

@keyframes jsa-breathe {
	0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
	33%      { transform: translate(2%, -3%) rotate(3deg) scale(1.05); border-radius: 45% 55% 48% 52% / 55% 45% 58% 42%; }
	66%      { transform: translate(-2%, 2%) rotate(-2deg) scale(.97); border-radius: 52% 48% 42% 58% / 45% 52% 48% 55%; }
}

@keyframes jsa-bob {
	0%, 100% { transform: translateY(0) rotate(-1.5deg); }
	50%      { transform: translateY(-10px) rotate(1.5deg); }
}

@keyframes jsa-spin-slow {
	to { transform: rotate(360deg); }
}

@keyframes jsa-pop-in {
	0%   { opacity: 0; transform: scale(.5) translateY(24px); }
	70%  { transform: scale(1.06) translateY(-4px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes jsa-wiggle {
	0%, 100% { transform: rotate(-2deg); }
	50%      { transform: rotate(2deg); }
}

/* Título estilo flyer: chunky con contorno */
.jsa-display {
	font-family: var(--jsa-font-display);
	font-weight: 700;
	line-height: .95;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.jsa-outline-white {
	color: var(--jsa-turq);
	text-shadow:
		-3px -3px 0 var(--jsa-white), 3px -3px 0 var(--jsa-white),
		-3px 3px 0 var(--jsa-white), 3px 3px 0 var(--jsa-white),
		0 6px 0 rgba(0, 0, 0, .22);
}

@media (prefers-reduced-motion: reduce) {
	.jsa-blob { animation: none; }
}