/* ── TEMPLATE 1: Artigo + Sidebar ── */

        /* Programação */
        .programacao {
            max-width: 100%;
            margin: 0 auto;
        }

        .tag-desc { flex: 1;}

        .tag-materia {
            margin-bottom: 3em;
        }

        .tag-materia h3 {
            color: var(--dourado);
            border-bottom: solid 1px rgba(128,128,128,0.2);
            padding-bottom: 0.5em;
            margin-bottom: 1.5em;
        }

        .tag-noticias {
            display: flex;
            gap: 1.5em;
            margin-bottom: 1.2em;
            padding-bottom: 1.em;
            border-bottom: solid 1px rgba(128,128,128,0.1);
            align-items: flex-start;
        }



        .tag-noticias:last-child { border-bottom: 0; }

.tag-img {
    display: block;
    flex-shrink: 0;
}

        .tag-img  img{
            width: 400px;
            height: auto;
            margin: 0.1em 2em 0 0;
        }

        .tag-desc h4 {
            margin-bottom: 0.4em;
            font-size: 1.3em;
        }

        .tag-desc p {
            font-size: .9em;
            font-weight: 500;
            line-height: 1.4em;
            color: var(--texto-medio);
            margin: 0;
            text-align: left;
        }

        .tag-titulo {
            display: inline-block;
            color: #000;
            font-size: 1.5em;
            padding: 0.15em 0;
            font-weight: 700;
            margin-bottom: 0.3em;
            letter-spacing: 0.03em;
        }

        .tag-stamp {
            color: rgba(41, 41, 41, 0.75);
            font-size: 0.8em;
            line-height: 1.3em;
            display: block;
            font-weight: 400;
            padding: 1em 0 0;
        }

        

        /* Responsivo */
        @media (max-width: 760px) {

    .tag-noticias {
        flex-direction: column;
    }

    .tag-img,
    .tag-img img {
        width: 100%;
        max-width: 100%;
        padding: 1em 0 0;
        margin: 0 0 0 0;
    }

}

/* variável global */
:root {
    --z-overlay: 100;
}

#lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: var(--z-overlay);
}

#lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    transform: scale(0.94);
    transition: transform 0.4s ease, opacity 0.3s ease;
}

#lightbox-overlay.active #lightbox-img {
    transform: scale(1);
}

.zoomable {
    cursor: zoom-in;
    position: relative;
    z-index: 1;
}


        /* ── TIMELINE VISUAL ── */
        .timeline-section {
            position: relative;
            padding-left: 2em;
        }

        .timeline-section::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--dourado, #c8a84b), rgba(200,168,75,0.15));
            border-radius: 2px;
        }

        .timeline-entry {
            position: relative;
            margin-bottom: 3em;
        }

        .timeline-entry::before {
            content: "";
            position: absolute;
            left: -2.45em;
            top: 0.35em;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--dourado, #c8a84b);
            box-shadow: 0 0 0 3px rgba(200,168,75,0.25);
        }

        /* ── GALERIA EM GRID ── */
        .foto-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 0.6em;
            margin: 1.2em 0 2.5em;
        }

        .foto-grid img {
            width: 100%;
            height: 130px;
            object-fit: cover;
            border-radius: 4px;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            cursor: zoom-in;
        }

        .foto-grid img:hover {
            transform: scale(1.04);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* ── INTRO LOGOS HERO ── */
        .intro-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3em;
            flex-wrap: wrap;
            padding: 2.5em 0 1.5em;
        }

        .intro-logos img {
            max-height: 200px;
            width: auto;
        }

        /* ── MODAL DE BOAS-VINDAS / MÚSICA ── */
        #music-welcome {
            position: fixed;
            inset: 0;
            background: rgba(8, 20, 42, 0.92);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(4px);
            animation: fadeInWelcome 0.6s ease;
        }

        @keyframes fadeInWelcome {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        #music-welcome.hide {
            animation: fadeOutWelcome 0.5s ease forwards;
        }

        @keyframes fadeOutWelcome {
            to { opacity: 0; pointer-events: none; }
        }

        .welcome-card {
            background: linear-gradient(160deg, #0f2d52 0%, #1a3d6b 60%, #0f2d52 100%);
            border: 1px solid rgba(200,168,75,0.35);
            border-radius: 16px;
            padding: 3em 2.5em;
            text-align: center;
            max-width: 380px;
            width: 90%;
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
        }

        .welcome-card .welcome-note {
            font-size: 2.8em;
            margin-bottom: 0.4em;
            display: block;
            animation: beatNote 1.8s ease-in-out infinite;
        }

        @keyframes beatNote {
            0%, 100% { transform: scale(1);   opacity: 1; }
            50%       { transform: scale(1.15); opacity: 0.8; }
        }

        .welcome-card h2 {
            color: var(--dourado, #c8a84b);
            font-size: 1.1em;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0 0 0.5em;
        }

        .welcome-card p {
            color: rgba(255,255,255,0.7);
            font-size: 0.9em;
            line-height: 1.6em;
            margin: 0 0 2em;
        }

        .welcome-card p em {
            color: rgba(255,255,255,0.45);
            font-size: 0.85em;
            display: block;
            margin-top: 0.5em;
        }

        .btn-musica {
            display: inline-block;
            background: var(--dourado, #c8a84b);
            color: #0a1e38;
            font-weight: 700;
            font-size: 0.95em;
            letter-spacing: 0.06em;
            padding: 0.85em 2.2em;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            margin-bottom: 1em;
            width: 100%;
            transition: background 0.2s, transform 0.15s;
        }

        .btn-musica:hover { background: #debb65; transform: scale(1.03); }
        .btn-musica:active { transform: scale(0.98); }

        .btn-semmusica {
            display: block;
            color: rgba(255,255,255,0.4);
            font-size: 0.78em;
            background: none;
            border: none;
            cursor: pointer;
            margin: 0 auto;
            padding: 0.4em;
            transition: color 0.2s;
        }

        .btn-semmusica:hover { color: rgba(255,255,255,0.7); }

        /* ── PLAYER DE MÚSICA NO FOOTER ── */
        #music-bar {
            background: rgba(0, 0, 0, 0.35);
            border-top: 1px solid rgba(200, 168, 75, 0.25);
            padding: 1em 1.5em;
            display: flex;
            align-items: center;
            gap: 1.2em;
            flex-wrap: wrap;
        }

        #music-bar .music-icon {
            font-size: 1.3em;
            color: var(--dourado, #c8a84b);
            flex-shrink: 0;
            animation: pulse-music 2.5s ease-in-out infinite;
        }

        @keyframes pulse-music {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        #music-bar .music-info {
            flex: 1;
            min-width: 160px;
        }

        #music-bar .music-info strong {
            display: block;
            font-size: 0.85em;
            color: var(--dourado, #c8a84b);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.1em;
        }

        #music-bar .music-info span {
            font-size: 0.8em;
            color: rgba(255,255,255,0.65);
            font-style: italic;
        }

        #music-bar .music-controls {
            display: flex;
            gap: 0.7em;
            align-items: center;
        }

        #music-bar button {
            background: rgba(200, 168, 75, 0.15);
            border: 1px solid rgba(200, 168, 75, 0.4);
            color: var(--dourado, #c8a84b);
            padding: 0.4em 0.9em;
            border-radius: 20px;
            font-size: 0.78em;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            letter-spacing: 0.04em;
        }

        #music-bar button:hover {
            background: var(--dourado, #c8a84b);
            color: #000;
        }

        #music-bar a.yt-link {
            font-size: 0.78em;
            color: rgba(255,255,255,0.5);
            text-decoration: none;
            border-bottom: 1px dotted rgba(255,255,255,0.25);
            transition: color 0.2s;
        }

        #music-bar a.yt-link:hover {
            color: rgba(255,255,255,0.85);
        }

        /* ── CARTAZ CENTRALIZADO ── */
        .cartaz-wrapper {
            text-align: center;
            margin: 1.5em 0 2em;
        }

        .cartaz-wrapper img {
            max-width: 65%;
            height: auto;
        }

        /* ── INTRO TEXT ── */
        #main header .byline {
            display: block;
            margin-bottom: 1.2em;
        }

        /* ── RESPONSIVO GRID ── */
        @media (max-width: 480px) {
            .foto-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .foto-grid img {
                height: 90px;
            }
            .intro-logos img {
                max-height: 130px;
            }
            .cartaz-wrapper img {
                max-width: 90%;
            }
        }

                /* ── TIMELINE VISUAL ── */
        .timeline-section {
            position: relative;
            padding-left: 2em;
        }

        .timeline-section::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--dourado, #c8a84b), rgba(200,168,75,0.15));
            border-radius: 2px;
        }

        .timeline-entry {
            position: relative;
            margin-bottom: 3em;
        }

        .timeline-entry::before {
            content: "";
            position: absolute;
            left: -2.45em;
            top: 0.35em;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--dourado, #c8a84b);
            box-shadow: 0 0 0 3px rgba(200,168,75,0.25);
        }

        /* ── GALERIA EM GRID ── */
        .foto-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 0.6em;
            margin: 1.2em 0 2.5em;
        }

        .foto-grid img {
            width: 100%;
            height: 130px;
            object-fit: cover;
            border-radius: 4px;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            cursor: zoom-in;
        }

        .foto-grid img:hover {
            transform: scale(1.04);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* ── INTRO LOGOS HERO ── */
        .intro-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3em;
            flex-wrap: wrap;
            padding: 2.5em 0 1.5em;
        }

        .intro-logos img {
            max-height: 200px;
            width: auto;
        }

        /* ── MODAL DE BOAS-VINDAS / MÚSICA ── */
        #music-welcome {
            position: fixed;
            inset: 0;
            background: rgba(8, 20, 42, 0.92);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(4px);
            animation: fadeInWelcome 0.6s ease;
        }

        @keyframes fadeInWelcome {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        #music-welcome.hide {
            animation: fadeOutWelcome 0.5s ease forwards;
        }

        @keyframes fadeOutWelcome {
            to { opacity: 0; pointer-events: none; }
        }

        .welcome-card {
            background: linear-gradient(160deg, #0f2d52 0%, #1a3d6b 60%, #0f2d52 100%);
            border: 1px solid rgba(200,168,75,0.35);
            border-radius: 16px;
            padding: 3em 2.5em;
            text-align: center;
            max-width: 380px;
            width: 90%;
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
        }

        .welcome-card .welcome-note {
            font-size: 2.8em;
            margin-bottom: 0.4em;
            display: block;
            animation: beatNote 1.8s ease-in-out infinite;
        }

        @keyframes beatNote {
            0%, 100% { transform: scale(1);   opacity: 1; }
            50%       { transform: scale(1.15); opacity: 0.8; }
        }

        .welcome-card h2 {
            color: var(--dourado, #c8a84b);
            font-size: 1.1em;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0 0 0.5em;
        }

        .welcome-card p {
            color: rgba(255,255,255,0.7);
            font-size: 0.9em;
            line-height: 1.6em;
            margin: 0 0 2em;
        }

        .welcome-card p em {
            color: rgba(255,255,255,0.45);
            font-size: 0.85em;
            display: block;
            margin-top: 0.5em;
        }

        .btn-musica {
            display: inline-block;
            background: var(--dourado, #c8a84b);
            color: #0a1e38;
            font-weight: 700;
            font-size: 0.95em;
            letter-spacing: 0.06em;
            padding: 0.85em 2.2em;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            margin-bottom: 1em;
            width: 100%;
            transition: background 0.2s, transform 0.15s;
        }

        .btn-musica:hover { background: #debb65; transform: scale(1.03); }
        .btn-musica:active { transform: scale(0.98); }

        .btn-semmusica {
            display: block;
            color: rgba(255,255,255,0.4);
            font-size: 0.78em;
            background: none;
            border: none;
            cursor: pointer;
            margin: 0 auto;
            padding: 0.4em;
            transition: color 0.2s;
        }

        .btn-semmusica:hover { color: rgba(255,255,255,0.7); }

        /* ── PLAYER DE MÚSICA COMPACTO NO FOOTER ── */
        #music-player {
            width: 200px;
            background: linear-gradient(160deg, #0b2040 0%, #132e55 100%);
            border: 1px solid rgba(200,168,75,0.3);
            border-radius: 10px;
            padding: 0.9em;
            flex-shrink: 0;
        }

        #music-player .mp-header {
            display: flex;
            align-items: center;
            gap: 0.5em;
            margin-bottom: 0.7em;
        }

        #music-player .mp-note {
            color: var(--dourado, #c8a84b);
            font-size: 1em;
            animation: pulse-music 2s ease-in-out infinite;
        }

        @keyframes pulse-music {
            0%,100% { opacity:1; } 50% { opacity:0.4; }
        }

        #music-player .mp-title {
            font-size: 0.7em;
            font-weight: 600;
            color: var(--dourado, #c8a84b);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }

        /* playlist */
        #music-player .mp-playlist {
            list-style: none;
            margin: 0 0 0.7em;
            padding: 0;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(200,168,75,0.15);
        }

        #music-player .mp-playlist li {
            font-size: 0.7em;
            padding: 0.38em 0.6em;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px solid rgba(200,168,75,0.08);
        }

        #music-player .mp-playlist li:last-child { border-bottom: 0; }

        #music-player .mp-playlist li:hover {
            background: rgba(200,168,75,0.1);
            color: rgba(255,255,255,0.9);
        }

        #music-player .mp-playlist li.ativa {
            background: rgba(200,168,75,0.18);
            color: var(--dourado, #c8a84b);
            font-weight: 600;
        }

        /* barra de progresso */
        #music-player .mp-progress {
            width: 100%;
            height: 3px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255,255,255,0.12);
            border-radius: 2px;
            margin-bottom: 0.6em;
            cursor: pointer;
        }

        #music-player .mp-progress::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: var(--dourado, #c8a84b);
            cursor: pointer;
            margin-top: -3.5px;
        }

        #music-player .mp-progress::-webkit-slider-runnable-track {
            height: 3px;
            border-radius: 2px;
        }

        /* tempo */
        #music-player .mp-time {
            display: flex;
            justify-content: space-between;
            font-size: 0.62em;
            color: rgba(255,255,255,0.35);
            margin-bottom: 0.6em;
        }

        /* volume */
        #music-player .mp-vol-row {
            display: flex;
            align-items: center;
            gap: 0.4em;
            margin-bottom: 0.65em;
        }

        #music-player .mp-vol-icon {
            font-size: 0.75em;
            color: rgba(255,255,255,0.45);
            flex-shrink: 0;
        }

        #music-player .mp-volume {
            flex: 1;
            height: 3px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255,255,255,0.12);
            border-radius: 2px;
            cursor: pointer;
        }

        #music-player .mp-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: rgba(200,168,75,0.7);
            cursor: pointer;
            margin-top: -3.5px;
        }

        /* controles play/pause/stop */
        #music-player .mp-controls {
            display: flex;
            justify-content: center;
            gap: 0.5em;
        }

        #music-player .mp-controls button {
            background: rgba(200,168,75,0.12);
            border: 1px solid rgba(200,168,75,0.3);
            color: var(--dourado, #c8a84b);
            width: 30px; height: 30px;
            border-radius: 50%;
            font-size: 0.75em;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s, transform 0.1s;
            padding: 0;
        }

        #music-player .mp-controls button:hover {
            background: rgba(200,168,75,0.28);
            transform: scale(1.1);
        }

        #music-player .mp-controls button:active { transform: scale(0.95); }

        #music-player .mp-controls button.ativo {
            background: var(--dourado, #c8a84b);
            color: #0a1e38;
        }

        /* ── CARTAZ CENTRALIZADO ── */
        .cartaz-wrapper {
            text-align: center;
            margin: 1.5em 0 2em;
        }

        .cartaz-wrapper img {
            max-width: 65%;
            height: auto;
        }

        /* ── INTRO TEXT ── */
        #main header .byline {
            display: block;
            margin-bottom: 1.2em;
        }

        /* ── RESPONSIVO GRID ── */
        @media (max-width: 480px) {
            .foto-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .foto-grid img {
                height: 90px;
            }
            .intro-logos img {
                max-height: 130px;
            }
            .cartaz-wrapper img {
                max-width: 90%;
            }
        }


                .tag-desc img {
            margin: 1em 0;
            border-radius: 4px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            align-items: center;
            text-align: center;
        }

        .tag-desc p {
            margin-bottom: 1em;
        }

        .img-destaque {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 2em 0 1.5em;
        }

        .img-destaque img {
            max-width: 720px;
            width: 100%;
            height: auto;
            border-radius: 6px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .img-destaque figcaption {
            margin-top: 0.6em;
            font-size: 0.75em;
            font-weight: 500;
            line-height: 1.4em;
            color: rgba(0, 0, 0, 0.55);
            text-align: center;
            max-width: 600px;
            font-style: italic;
        }

        .tag-links {
            margin-top: 0.8em;
        }

        .tag-links a {
            font-size: 0.8em;
            color: var(--dourado);
            text-decoration: none;
            border-bottom: 1px dotted rgba(200, 168, 75, 0.4);
        }