* {
            box-sizing: border-box;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            margin: 0;
            padding: 30px;
            background: #f5f5f5;
            color: #222;
        }

        h1 {
            text-align: center;
            margin: 0 0 30px;
        }

        /* GALERIA */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 18px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* CARD */
        .card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* IMAGEM */
        .card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .card:hover img {
            transform: scale(1.03);
        }

        /* LEGENDA */
        .caption {
            padding: 12px;
            font-size: 14px;
            color: #333;
            text-align: center;
        }


        /* =========================
           LIGHTBOX
        ========================= */

        .lightbox {
            display: none;
            position: fixed;
            z-index: 9999;
            inset: 0;

            background: rgba(0, 0, 0, 0.92);

            align-items: center;
            justify-content: center;
        }

        .lightbox.active {
            display: flex;
        }

        /* IMAGEM GRANDE */
        .lightbox-image {
            max-width: 85%;
            max-height: 85vh;

            object-fit: contain;

            border-radius: 6px;

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

            animation: zoomIn 0.25s ease;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* BOTÃO FECHAR */
        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;

            background: none;
            border: none;

            color: #fff;

            font-size: 42px;
            font-weight: 300;

            cursor: pointer;

            line-height: 1;

            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .lightbox-close:hover {
            transform: scale(1.15);
            opacity: 0.7;
        }

        /* BOTÕES DE NAVEGAÇÃO */
        .lightbox-prev,
        .lightbox-next {
            position: absolute;

            top: 50%;
            transform: translateY(-50%);

            width: 55px;
            height: 55px;

            border-radius: 50%;

            border: none;

            background: rgba(255, 255, 255, 0.15);

            color: #fff;

            font-size: 30px;

            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;

            transition: background 0.2s ease, transform 0.2s ease;
        }

        .lightbox-prev {
            left: 25px;
        }

        .lightbox-next {
            right: 25px;
        }

        .lightbox-prev:hover,
        .lightbox-next:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .lightbox-prev:hover {
            transform: translateY(-50%) scale(1.08);
        }

        .lightbox-next:hover {
            transform: translateY(-50%) scale(1.08);
        }

        /* CONTADOR */
        .lightbox-counter {
            position: absolute;

            bottom: 20px;
            left: 50%;

            transform: translateX(-50%);

            color: #fff;

            font-size: 14px;

            background: rgba(0, 0, 0, 0.4);

            padding: 6px 12px;

            border-radius: 20px;
        }


        /* =========================
           RESPONSIVO
        ========================= */

        @media (max-width: 600px) {

            body {
                padding: 20px 12px;
            }

            .grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .card img {
                height: 130px;
            }

            .lightbox-image {
                max-width: 92%;
                max-height: 80vh;
            }

            .lightbox-prev,
            .lightbox-next {
                width: 42px;
                height: 42px;

                font-size: 22px;
            }

            .lightbox-prev {
                left: 10px;
            }

            .lightbox-next {
                right: 10px;
            }

            .lightbox-close {
                top: 15px;
                right: 18px;
                font-size: 36px;
            }
        }
/* ===============================
   VÍDEO NA GALERIA
================================ */




/* ===============================
   LIGHTBOX MEDIA
================================ */

.lightbox-media {
    max-width: 85%;
    max-height: 80vh;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGEM */

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;

    object-fit: contain;

    border-radius: 6px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    animation: zoomIn 0.25s ease;
}





/* ===============================
   ANIMAÇÃO
================================ */

@keyframes zoomIn {

    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* ===============================
   TÍTULO
================================ */

.lightbox-title {

    position: absolute;

    bottom: 55px;

    left: 50%;

    transform: translateX(-50%);

    color: white;

    font-size: 16px;
    font-weight: 600;

    text-align: center;

    background: rgba(0, 0, 0, 0.45);

    padding: 7px 15px;

    border-radius: 20px;
}


/* ===============================
   RESPONSIVO
================================ */

@media (max-width: 600px) {

    .lightbox-media {

        max-width: 92%;
        max-height: 75vh;

    }

    .lightbox-image {

        max-height: 75vh;

    }

}