body.directo .content h1:first-of-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.4rem;
    row-gap: 0.3rem;
}

body.directo .content h1:first-of-type::before {
    content: "";
    order: 1;
    display: inline-block;
    width: 0.32em;
    height: 0.32em;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--accent, #ff453a);
    box-shadow: 0 0 10px var(--accent, #ff453a);
    animation: live-dot-fade 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

body.directo .content h1:first-of-type::after {
    content: "en directo";
    order: 2;
    font-size: 0.42em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent, #ff453a);
    line-height: 1;
    user-select: none;
}

.md-typeset .sh-badge.sh-badge-directo,
.sh-badge.sh-badge-directo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
}

.md-typeset .sh-badge.sh-badge-directo::before,
.sh-badge.sh-badge-directo::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ff3b30;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.7);
    animation: live-dot-fade 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes live-dot-fade {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 69, 58, 0.9);
    }
    50% {
        opacity: 0.2;
        box-shadow: 0 0 2px rgba(255, 69, 58, 0.2);
    }
}

@media print {
    body.directo .content h1:first-of-type::before,
    body.directo .content h1:first-of-type::after,
    .sh-badge.sh-badge-directo {
        display: none !important;
    }
}