/* OfficeAcademy · Estilos de la mascota "Sabio" (compartido en todo el sitio) */
/* ---------------- Mascota (Sabio, el búho de OfficeAcademy) ---------------- */
.mascota-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; align-items: flex-end; gap: 10px; transition: left 1.8s cubic-bezier(.65,0,.35,1), top 1.8s cubic-bezier(.65,0,.35,1); pointer-events: none; }
.mascota-bubble { max-width: 190px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px) scale(.95); transition: all .25s var(--ease); margin-bottom: 6px; color: var(--text); pointer-events: none; }
.mascota-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.mascota-svg-box { position: relative; width: 62px; height: 62px; cursor: pointer; animation: mascotaIdle 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)) var(--mascota-filter, ); pointer-events: auto; }
.mascota-svg-box:hover { animation-play-state: paused; transform: scale(1.08); }
.mascota-svg-box.happy { animation: mascotaHappy .6s ease-in-out 2; }
.mascota-svg-box.sad { animation: mascotaSad .6s ease-in-out; }
.mascota-svg-box.dance { animation: mascotaDance .5s ease-in-out 6; }
@keyframes mascotaIdle { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes mascotaHappy { 0%,100% { transform: translateY(0) scale(1) rotate(0deg); } 30% { transform: translateY(-18px) scale(1.1) rotate(8deg); } 60% { transform: translateY(0) scale(1) rotate(-6deg); } }
@keyframes mascotaSad { 0%,100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(4px) rotate(-6deg); } 60% { transform: translateY(4px) rotate(6deg); } }
@keyframes mascotaDance { 0% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-14deg) translateY(-10px); } 50% { transform: rotate(0deg) translateY(0); } 75% { transform: rotate(14deg) translateY(-10px); } 100% { transform: rotate(0deg) translateY(0); } }
.mascota-sound-toggle { position: absolute; top: -12px; left: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-border); font-size: 10.5px; display: flex; align-items: center; justify-content: center; color: var(--text-soft); backdrop-filter: blur(10px); z-index: 2; }
@media (max-width: 560px) { .mascota-wrap { bottom: 12px; right: 12px; } .mascota-svg-box { width: 50px; height: 50px; } .mascota-bubble { max-width: 150px; font-size: 11.5px; } }

/* ---------------- Marcos de avatar (objetos de la tienda) ---------------- */
.avatar-frame-dorado { box-shadow: 0 0 0 4px #F5A623, 0 0 18px 2px rgba(245,166,35,.6) !important; }
.avatar-frame-fuego { box-shadow: 0 0 0 4px #C43E1C, 0 0 20px 3px rgba(196,62,28,.65) !important; background: conic-gradient(from 0deg, #F5A623, #C43E1C, #F5A623) !important; }
.avatar-frame-cristal { box-shadow: 0 0 0 4px #7BC4F5, 0 0 20px 3px rgba(123,196,245,.65) !important; }

/* ---------------- Insignia VIP ---------------- */
.vip-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; font-family: var(--f-mono); background: linear-gradient(135deg, #F5A623, #E08E1B); color: #fff; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }

/* ---------------- Tema Medianoche (objeto equipable de la tienda) ---------------- */
[data-accent="medianoche"] { --brand: #8B5CF6 !important; --brand-2: #B794F6 !important; }