/**
 * Chala Monster - Personaje Animado
 * Versión WordPress
 * Autor: Joel Chala
 */

:root {
	--chala-base: #f7a10a;
	--chala-light: #ffc24a;
	--chala-dark: #d57d00;
	--chala-tongue: #d43a3a;
}

/* Container del personaje en el header */
.chala-container {
	position: absolute !important;
	right: 20px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 120px !important;
	height: 130px !important;
	z-index: 5 !important;
	pointer-events: all !important;
}

/* Container del personaje en el footer */
.chala-container.chala-footer {
	position: fixed !important;
	right: 20px !important;
	bottom: 80px !important;
	top: auto !important;
	transform: none !important;
	z-index: 999 !important;
}

/* ===== MONSTRUO ===== */
.chala-monster {
	--size: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--size);
	height: var(--size);
	border-radius: 48% 52% 50% 50% / 55% 50% 48% 52%;
	background:
		radial-gradient(40px 35px at 35% 35%, var(--chala-light), transparent 62%),
		radial-gradient(60px 50px at 70% 80%, var(--chala-dark), var(--chala-base) 60%),
		radial-gradient(circle at 50% 50%, var(--chala-base), var(--chala-dark) 90%);
	box-shadow:
		inset 0 4px 8px rgba(255,255,255,0.4),
		inset 0 -6px 14px rgba(0,0,0,0.15),
		0 6px 14px rgba(0,0,0,0.18);
	animation: chala-float 3.2s ease-in-out infinite;
	cursor: pointer;
	transition: box-shadow 0.3s ease;
}

.chala-monster:hover {
	box-shadow:
		inset 0 4px 8px rgba(255,255,255,0.6),
		inset 0 -6px 14px rgba(0,0,0,0.15),
		0 8px 20px rgba(255,215,8,0.5);
}

/* Brazos pequeños */
.chala-limb {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(30px 25px at 30% 30%, var(--chala-light), var(--chala-base));
	border-radius: 50%;
	box-shadow: inset 0 -3px 6px rgba(0,0,0,0.12);
}

.chala-arm.left { left: -10px; top: 40px; }
.chala-arm.right { right: -10px; top: 40px; }

.chala-arm.wave {
	animation: chala-wave 0.6s ease-in-out infinite;
}

/* OJO */
.chala-eye {
	position: absolute;
	left: 50%;
	top: 34%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 65%, #ddd 85%);
	box-shadow: inset 0 -3px 7px rgba(0,0,0,0.18);
}

.chala-iris {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #7ef3b3, #1fa15f 70%);
}

.chala-pupil {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #000;
}

/* BOCA */
.chala-mouth {
	position: absolute;
	left: 50%;
	top: 64%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 28px;
	border-radius: 0 0 32px 32px;
	background: #4a0505;
	overflow: hidden;
}

.chala-mouth.happy {
	width: 70px;
	height: 26px;
	border-radius: 32px 32px 50px 50px;
}

.chala-tongue {
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
	width: 32px;
	height: 13px;
	border-radius: 14px;
	background: var(--chala-tongue);
}

/* Burbuja de diálogo */
.chala-speech {
	position: absolute;
	left: 50%;
	top: -50px;
	transform: translateX(-50%) scale(0);
	background: #fff;
	padding: 8px 12px;
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
	font-size: 11px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	transition: all 0.3s ease;
}

.chala-speech.active {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

.chala-speech::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
}

/* Animaciones */
@keyframes chala-float {
	0%, 100% { transform: translate(-50%, -54%) scale(1); }
	50% { transform: translate(-50%, -46%) scale(1.03); }
}

@keyframes chala-wave {
	0%, 100% { transform: rotate(-20deg) translateY(-5px); }
	50% { transform: rotate(-50deg) translateY(-12px); }
}

@keyframes chala-jump {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -70%) scale(0.95); }
}

@keyframes chala-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === NUEVAS ANIMACIONES === */

/* Balanceo lateral (baile) */
@keyframes chala-dance {
	0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
	25% { transform: translate(-50%, -50%) rotate(3deg); }
	50% { transform: translate(-50%, -50%) rotate(-3deg); }
	75% { transform: translate(-50%, -50%) rotate(3deg); }
}

/* Rebote */
@keyframes chala-bounce {
	0%, 100% { transform: translate(-50%, -50%) scaleY(1); }
	50% { transform: translate(-50%, -70%) scaleY(0.9); }
}

/* Temblor */
@keyframes chala-shake {
	0%, 100% { transform: translate(-50%, -50%) translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translate(-50%, -50%) translateX(-3px); }
	20%, 40%, 60%, 80% { transform: translate(-50%, -50%) translateX(3px); }
}

/* Deslizamiento lateral */
@keyframes chala-slide {
	0% { transform: translate(-50%, -50%); }
	50% { transform: translate(-30%, -50%); }
	100% { transform: translate(-50%, -50%); }
}

/* Zoom in/out */
@keyframes chala-zoom {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* Caída dramática */
@keyframes chala-fall {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, 20%) rotate(90deg); }
}

/* Movimiento de cabeza (sí) */
@keyframes chala-nod-yes {
	0%, 100% { transform: translate(-50%, -50%); }
	25%, 75% { transform: translate(-50%, -45%); }
	50% { transform: translate(-50%, -50%); }
}

/* Movimiento de cabeza (no) */
@keyframes chala-nod-no {
	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
	25% { transform: translate(-50%, -50%) rotate(-8deg); }
	75% { transform: translate(-50%, -50%) rotate(8deg); }
}

/* Estiramiento */
@keyframes chala-stretch {
	0%, 100% { transform: translate(-50%, -50%) scaleY(1); }
	50% { transform: translate(-50%, -50%) scaleY(1.3) scaleX(0.9); }
}

/* Flotación suave */
@keyframes chala-hover {
	0%, 100% { transform: translate(-50%, -50%); }
	50% { transform: translate(-50%, -45%); }
}

/* Parpadeo rápido */
@keyframes chala-blink-fast {
	0%, 45%, 55%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(0.1); }
}

/* Ojo en espiral (mareo) */
@keyframes chala-dizzy {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Brillo del ojo */
@keyframes chala-sparkle {
	0%, 100% { opacity: 0; transform: scale(0); }
	50% { opacity: 1; transform: scale(1); }
}

/* Confeti */
@keyframes chala-confetti {
	0% { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}

/* Pulso de energía */
@keyframes chala-energy-pulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.5); opacity: 0; }
}

/* Pixelado (desaparición) */
@keyframes chala-pixelate {
	0% { filter: blur(0px); opacity: 1; }
	100% { filter: blur(10px); opacity: 0; }
}

/* Lágrima cayendo */
@keyframes chala-tear-fall {
	0% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(30px); opacity: 0; }
}

/* Corazones flotantes */
@keyframes chala-heart-float {
	0% { transform: translateY(0) scale(1); opacity: 0; }
	20% { opacity: 1; }
	100% { transform: translateY(-50px) scale(0.5); opacity: 0; }
}

/* === ELEMENTOS ESPECIALES === */

/* Lágrima */
.chala-tear {
	position: absolute !important;
	left: 50% !important;
	top: 70% !important;
	width: 8px !important;
	height: 12px !important;
	background: #4fc3f7 !important;
	border-radius: 50% 0 50% 50% !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transform-origin: top !important;
}

.chala-tear.active {
	opacity: 1 !important;
	animation: chala-tear-fall 2s ease-in forwards !important;
}

/* Brillo/Estrella */
.chala-sparkle-effect {
	position: absolute !important;
	top: 20% !important;
	right: 10% !important;
	width: 20px !important;
	height: 20px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.chala-sparkle-effect::before,
.chala-sparkle-effect::after {
	content: '' !important;
	position: absolute !important;
	background: #FFD700 !important;
	width: 100% !important;
	height: 3px !important;
	top: 50% !important;
	left: 0 !important;
	transform: translateY(-50%) !important;
}

.chala-sparkle-effect::after {
	transform: translateY(-50%) rotate(90deg) !important;
}

.chala-sparkle-effect.active {
	animation: chala-sparkle 1s ease-in-out !important;
}

/* Confeti */
.chala-confetti {
	position: absolute !important;
	width: 8px !important;
	height: 8px !important;
	top: 0 !important;
	left: 50% !important;
	border-radius: 50% !important;
	pointer-events: none !important;
}

/* Anillo de energía */
.chala-energy-ring {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 120px !important;
	height: 120px !important;
	border: 3px solid #FF914D !important;
	border-radius: 50% !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.chala-energy-ring.active {
	animation: chala-energy-pulse 1s ease-out !important;
}

/* Rubor en mejillas */
.chala-blush {
	position: absolute !important;
	width: 20px !important;
	height: 15px !important;
	background: rgba(255, 182, 193, 0.6) !important;
	border-radius: 50% !important;
	top: 55% !important;
	opacity: 0 !important;
	transition: opacity 0.3s !important;
	pointer-events: none !important;
}

.chala-blush.left {
	left: 15% !important;
}

.chala-blush.right {
	right: 15% !important;
}

.chala-blush.active {
	opacity: 1 !important;
}

/* Corazones */
.chala-heart {
	position: absolute !important;
	width: 15px !important;
	height: 15px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.chala-heart::before,
.chala-heart::after {
	content: '' !important;
	position: absolute !important;
	width: 10px !important;
	height: 15px !important;
	background: #FF2E63 !important;
	border-radius: 10px 10px 0 0 !important;
}

.chala-heart::before {
	left: 5px !important;
	transform: rotate(-45deg) !important;
}

.chala-heart::after {
	left: -2px !important;
	transform: rotate(45deg) !important;
}

.chala-heart.active {
	animation: chala-heart-float 2s ease-out forwards !important;
}

/* Burbuja de pensamiento */
.chala-thought-bubble {
	position: absolute !important;
	left: 110% !important;
	top: -20px !important;
	background: white !important;
	border: 2px solid #2B2D42 !important;
	border-radius: 20px !important;
	padding: 10px 15px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #2B2D42 !important;
	opacity: 0 !important;
	transform: scale(0) !important;
	transition: all 0.3s ease !important;
	pointer-events: none !important;
	white-space: nowrap !important;
	z-index: 15 !important;
}

.chala-thought-bubble::before {
	content: '' !important;
	position: absolute !important;
	left: -15px !important;
	top: 20px !important;
	width: 15px !important;
	height: 15px !important;
	background: white !important;
	border: 2px solid #2B2D42 !important;
	border-radius: 50% !important;
	border-right: none !important;
	border-top: none !important;
}

.chala-thought-bubble::after {
	content: '' !important;
	position: absolute !important;
	left: -8px !important;
	top: 28px !important;
	width: 8px !important;
	height: 8px !important;
	background: white !important;
	border: 2px solid #2B2D42 !important;
	border-radius: 50% !important;
	border-right: none !important;
	border-top: none !important;
}

.chala-thought-bubble.active {
	opacity: 1 !important;
	transform: scale(1) !important;
}

/* Estados de ánimo - fondos de color */
.chala-mood-bg {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 140px !important;
	height: 140px !important;
	border-radius: 50% !important;
	opacity: 0 !important;
	transition: opacity 0.5s !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

.chala-mood-bg.happy {
	background: radial-gradient(circle, rgba(255, 215, 8, 0.3), transparent) !important;
}

.chala-mood-bg.sad {
	background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent) !important;
}

.chala-mood-bg.angry {
	background: radial-gradient(circle, rgba(255, 76, 76, 0.3), transparent) !important;
}

.chala-mood-bg.love {
	background: radial-gradient(circle, rgba(255, 46, 99, 0.3), transparent) !important;
}

.chala-mood-bg.active {
	opacity: 1 !important;
}

/* Responsive */
@media (max-width: 768px) {
	.chala-container {
		display: none !important;
	}
}