/* ═══════════════════════════════════════════════════════════════════════
   MUSGUI — la mariquita minimalista escurridiza.

   Dos vistas:
   · CENITAL (.em-musgui-top): vista desde arriba, sin antenas ni patas. Se ancla
     por su CENTRO sobre la superficie de un elemento.
   · PERFIL (.em-musgui-side): vista de lado con 3 patitas. Se ancla por las PATAS
     justo al canto del elemento (las patas tocan el borde, el cuerpo asoma fuera).
   ═══════════════════════════════════════════════════════════════════════ */

.em-musgui {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2147483600;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.35));
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Cenital: anclada por el centro. */
.em-musgui-top {
    width: 28px;
    transform: translate(-50%, -50%) rotate(var(--em-musgui-rot, 0deg));
    transform-origin: 50% 50%;
}

/* Perfil: anclada por las patas (≈88% de su alto) al canto, y rota alrededor de
   ese punto para que el cuerpo asome hacia fuera del borde. */
.em-musgui-side {
    width: 30px;
    transform: translate(-50%, -88%) rotate(var(--em-musgui-rot, 0deg));
    transform-origin: 50% 88%;
}

.em-musgui svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Guiño al pasar el cursor o pulsarla (en el SVG interno, para no descolocar el
   anclaje del contenedor). NO huye: se queda y se puede pulsar. */
.em-musgui:hover svg,
.em-musgui.em-musgui-poke svg { animation: emMusguiWiggle 0.5s ease-in-out; }
@keyframes emMusguiWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-9deg) scale(1.08); }
    75%      { transform: rotate(9deg) scale(1.08); }
}

/* ─── Asomo por el botón de WhatsApp con bocadillo ─── */
.em-musgui.em-musgui-peek {
    animation: emMusguiPeekIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes emMusguiPeekIn {
    0%   { transform: translate(-50%, -20%) rotate(var(--em-musgui-rot, 0deg)); opacity: 0; }
    100% { transform: translate(-50%, -88%) rotate(var(--em-musgui-rot, 0deg)); opacity: 1; }
}

.em-musgui-bubble {
    position: fixed;
    z-index: 2147483601;
    max-width: 210px;
    padding: 9px 13px;
    background: #2D6A4F;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    transform-origin: bottom right;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    text-align: left;
}
.em-musgui-bubble.em-musgui-bubble-on {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.em-musgui-bubble::after {
    content: '';
    position: absolute;
    right: 24px;
    bottom: -7px;
    border: 7px solid transparent;
    border-bottom: 0;
    border-top-color: #2D6A4F;
}

@media (prefers-reduced-motion: reduce) {
    .em-musgui:hover svg, .em-musgui.em-musgui-poke svg { animation: none; }
    .em-musgui.em-musgui-peek { animation: none; }
    .em-musgui-bubble { transition: opacity 0.2s ease; }
}