/* ── Trigger ─────────────────────────────────────────────────── */
.mc-wrap { vertical-align:middle; margin:0; }
.mc-wrap + p:empty { display:none !important; margin:0 !important; }
p:has(> .mc-wrap) { display:inline-block !important; margin:0 !important; }
p:has(+ .mc-wrap) { display:none !important; margin:0 !important; }

.mc-trigger {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    padding:6px; background:none; border:none; cursor:pointer; color:#ffffff;
    -webkit-tap-highlight-color:transparent; outline:none;
}
.mc-trigger:focus-visible { outline:2px solid rgba(255,255,255,.5); outline-offset:3px; border-radius:6px; }

/* ── Íconos ──────────────────────────────────────────────────── */
.mc-icon { width:26px; height:26px; display:block; pointer-events:none; color:#ffffff; }
.mc-icon svg { width:100%; height:100%; display:block; }

/* ── Badge ───────────────────────────────────────────────────── */
.mc-badge {
    position:absolute; top:-5px; right:-7px;
    min-width:18px; height:18px; padding:0 4px;
    background:var(--mc-badge); color:var(--mc-badge-f);
    border-radius:99px; font-size:9px; font-weight:800;
    line-height:18px; text-align:center; letter-spacing:.01em;
    pointer-events:none;
    transition:transform var(--mc-speed) cubic-bezier(.34,1.56,.64,1), opacity var(--mc-speed);
    transform-origin:center;
}
.mc-badge--hidden { transform:scale(0); opacity:0; }

@keyframes mc-badge-pop {
    0%   { transform:scale(1); }
    35%  { transform:scale(1.65) rotate(-12deg); }
    65%  { transform:scale(0.88) rotate(6deg); }
    100% { transform:scale(1) rotate(0deg); }
}
@keyframes mc-trigger-shake {
    0%,100% { transform:rotate(0); }
    20% { transform:rotate(-14deg); }
    40% { transform:rotate(14deg); }
    60% { transform:rotate(-8deg); }
    80% { transform:rotate(8deg); }
}
.mc-badge--pop     { animation:mc-badge-pop     0.55s cubic-bezier(.34,1.56,.64,1) forwards; }
.mc-trigger--shake { animation:mc-trigger-shake 0.5s ease forwards; }

/* ── Backdrop ────────────────────────────────────────────────── */
.mc-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:9998; opacity:0; transition:opacity var(--mc-speed) ease;
}
.mc-backdrop--vis { opacity:1; }
@media (max-width:480px) {
    .mc-backdrop { display:block; pointer-events:none; }
    .mc-backdrop--vis { pointer-events:all; }
}