.corpo-especial {
    background-color: #D40075;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100vw;
    font-family: 'Open Sans', sans-serif;
    /* background-image: url('fundo-estante-bg.jpg'); */
    background-size: auto;
    background-repeat: repeat;
    background-position: top left;
    position: relative;
    display: inline-flex; /* Garante que os itens fiquem na mesma linha */
    border: 0 solid;
}

#scroll-content {
    width: 1920px; /* Tamanho maior que o contêiner para permitir o movimento */
    height: 5210px;
    /* background-image: url('fundo-estante-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat; */
    position: absolute;
    border: 0 solid;
}

#scroll-content.active {
    cursor: grabbing;
    user-select: none; /* Evita seleção de texto enquanto arrasta */
}

#scroll-container {
    width: 100vw; /* Largura total da janela */
    height: 100vh; /* Altura total da janela */
    overflow: hidden; /* Oculta o conteúdo fora do contêiner */
    position: relative;
    cursor: grab; /* Cursor para arrasto */
    touch-action: none; /* Desabilita gestos padrão como zoom ou rolagem */
    border: 0 solid;

}

#scroll-container:active {
    cursor: grabbing;
}



/* Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo preto com transparência */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Garante que o modal fique acima de outros elementos */
    opacity: 1;
    transition: opacity 0.5s ease; /* Transição suave de 0.5 segundos */
}

/* Modal Content */
.welcome-content {
    background-color: none; /* Fundo branco para o conteúdo */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    user-select: none; /* Impede que o conteúdo seja selecionado */
}

/* Icon */
.welcome-icon {
    width: 50px;
    height: auto;
    margin-bottom: 10px;
    user-select: none; /* Impede que o conteúdo seja selecionado */

}

/* Text */
.welcome-text {
    font-size: 18px;
    color: #fff;
    margin: 0;
    user-select: none; /* Impede que o conteúdo seja selecionado */

}





.fundo-img{
    width: 1920px; /* Ajuste conforme necessário */
    height: 5400px; /* Ajuste conforme necessário */
    top: 0px;
    left: 0px;
    position: absolute; /* Certifique-se de que os itens estão posicionados corretamente */
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/fundo-estante-bg.jpg');
    background-size: contain; /* Ajusta a imagem para cobrir o tamanho do item */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    position: absolute;
    z-index: 00; /* Certifique-se de que os itens estão na frente */
    border: 0 solid;
}


.titulo-logo{
    width: 600px; /* Ajuste conforme necessário */
    height: 500px; /* Ajuste conforme necessário */
    top: 70px;
    left: 650px;
    position: absolute; /* Certifique-se de que os itens estão posicionados corretamente */
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/logo.png');
    background-size: contain; /* Ajusta a imagem para cobrir o tamanho do item */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    position: absolute;
    z-index: 10; /* Certifique-se de que os itens estão na frente */
}

.titulo-texto {
    position: absolute;
    color: #ffffff; /* Cor do texto */
    font-size: 1.8rem; /* Tamanho da fonte */
    text-align: center; /* Centraliza o texto */
    padding: 20px; /* Adiciona espaçamento interno */
    width: 880px; /* Mesma largura de .bg-texto */
    height: 170px;
    top: 350px;
    left: 530px;
    z-index: 11; /* Certifique-se de que aparece acima do fundo */
    line-height: 1.15;  /* Altura da linha (1.5 vezes o tamanho da fonte) */
    user-select: none; /* Impede que o conteúdo seja selecionado */



    /* Permite quebra de linha */
    word-wrap: break-word; /* Quebra palavras grandes */
    overflow-wrap: break-word; /* Compatibilidade adicional */
    white-space: normal; /* Permite que o texto ocupe várias linhas */
}

.titulo-clique {
    position: absolute;
    color: #000; /* Cor do texto */
    font-size: 1.5rem; /* Tamanho da fonte */
    text-align: center; /* Centraliza o texto */
    padding: 10px; /* Adiciona espaçamento interno */
    width: 350px; /* Mesma largura de .bg-texto */
    height: auto;
    top: 560px;
    left: 800px;
    z-index: 11; /* Certifique-se de que aparece acima do fundo */

    background-color: #F4A700;
    border: 4px solid #000;

    /* Permite quebra de linha */
    word-wrap: break-word; /* Quebra palavras grandes */
    overflow-wrap: break-word; /* Compatibilidade adicional */
    white-space: normal; /* Permite que o texto ocupe várias linhas */

    user-select: none; /* Impede que o conteúdo seja selecionado */

}

.cards{
    transform: scale(1.013)
}

.item {
    background-position: center;
    cursor: pointer;
    pointer-events: auto;
}

.item img {
    pointer-events: auto;
}

.item:hover {
    transform: scale(1.06); /* Aumenta o tamanho do item */
    transition: transform .4s ease; /* Suaviza a animação */
    /* box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); Adiciona uma sombra ao item */
    z-index: 15; /* Garante que o item fique acima dos outros durante o hover */
}

.item{
    width: 305px; /* Ajuste conforme necessário */
    height: 305px; /* Ajuste conforme necessário */
    position: absolute; /* Certifique-se de que os itens estão posicionados corretamente */
    cursor: pointer; /* Torna os itens clicáveis */
    background-size: contain; /* Ajusta a imagem para cobrir o tamanho do item */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    position: absolute;
    z-index: 10; /* Certifique-se de que os itens estão na frente */
}

.item1 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/1.png');
    top: 702px;
    left: 700px;
    width: 310px;
    height: 316px;
}

.item2 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/2.png');
    top: 1052px;
    left: 910px;
    width: 310px;
    height: 316px;
}

.item3 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/3.png');
    top: 1400px;
    left: 240px;
    width: 310px;
    height: 316px;
}

.item4 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/4.png');
    top: 1400px;
    left: 700px;
    width: 310px;
    height: 316px;

}

.item5 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/5.png');
    top: 1400px;
    left: 1300px;
    width: 310px;
    height: 316px;

}

.item6 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/6.png');
    top: 1754px;
    left: 280px;
}

.item7 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/7.png');
    top: 1754px;
    left: 630px;
}

.item8 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/8.png');
    top: 1754px;
    left: 1240px;
}

.item9 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/9.png');
    top: 2100px;
    left: 912px;
}

.item10 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/10.png');
    top: 2452px;
    left: 360px;
}

.item11 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/11.png');
    top: 2452px;
    left: 830px;
}

.item12 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/12.png');
    top: 2802px;
    left: 570px;
    width: 360px;
}

.item13 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/13.png');
    top: 2800px;
    left: 1320px;
}

.item14 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/14.png');
    top: 3146px;
    left: 600px;
}

.item15 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/15.png');
    top: 3840px;
    left: 550px;
}

.item16 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/16.png');
    top: 4190px;
    left: 382px;
    width: 300px;
    height: 300px;
}

.item17 {
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/albuns-v2/17.png');
    top: 4190px;
    left: 970px;
}

#modal {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.15); /* Fundo escuro suave com transparência */
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 30;
    backdrop-filter: blur(10px); /* Efeito de desfoque para o fundo */
}



#modal-content {
    font-family: 'Open Sans', sans-serif;

    background-color: #fff;
    /* background-image: url('bg-popup.png');
    background-size: auto;
    background-repeat: repeat;
    background-position: top left; */
    /* border: 4px solid #c4170c; Bordas vermelhas */
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 550px;
    text-align: center;
    border: 4px solid #000;
    box-shadow: 8 8px 30px rgba(0, 0, 0, 0.8); /* Sombra sutil para destaque */
    animation: fadeIn 0.5s ease-out; /* Animação de entrada */
}

#texto-modal
{
        background-color: #F4A700;
        padding: 32px;
        margin-bottom: 0px;
        color: #fff;
}

.album-name {
    font-size: 22px;
    font-weight: bolder;
    color: #fff; /* Destaque em vermelho */
    margin: 0px;
    text-transform: uppercase;
    /* text-transform: uppercase; Letra maiúscula */
}

.modal-album-nota {
    font-size: 18px;
    font-weight: bolder;
    color: #000; /* Destaque em vermelho */
    margin: 8px;
    text-transform: uppercase;
    /* text-transform: uppercase; Letra maiúscula */
}

#album-name{
    color: #000;
    font-weight: 900;
}

.modal-descricao {
    font-size: 11pt;
    margin: 4px;
    line-height: 1.5;
    color: #000; /* Texto suave */
}


#baixo-modal
{
    background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/fundo-modal.jpg');
    background-size: contain;
    background-repeat: repeat-x;
    background-position: top left;
}

#modal-content iframe {
    width: 100%;
    height: 315px;
    margin-bottom: 0px;
    border-radius: 10px;
    border: 1px solid #444; /* Borda discreta no player */
}

.nome-artista{
    color: #000;
}

#modal-content .button-container {
    display: flex; /* Alinha os botões lado a lado */
    justify-content: center; /* Centraliza os botões horizontalmente */
    gap: 12px; /* Espaçamento entre os botões */
}

#modal-content button {
    background-color: #fff;
    border: none;
    color: #000;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid #000;    margin-bottom: 0; /* Remove o espaçamento inferior */
    transition: all 0.3s ease;
    box-shadow: 0 4px 0px rgba(000, 000, 000, 1); /* Sombra no botão */
}


#modal-content button:hover {
    background-color: #5E17D9;
    color: #fff;
    box-shadow: 0 4px 0px rgba(000, 000, 000, 1); /* Sombra no botão */
}

#modal-content button:focus {
    box-shadow: 0 4px 0px rgba(000, 000, 000, 1); /* Sombra no botão */
}

#player-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Animação de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.creditos {
    font-family: 'Open Sans', sans-serif;
    position: absolute; /* Ou use 'fixed', dependendo da necessidade */
    top: 4960px; /* Distância do topo */
    left: 750px; /* Distância da esquerda */
    color: #000;
    background-color: #fff;
    padding: 20px;
    border-radius: 0px;
    border: 3px solid #000;
}

.creditos-titulo {
    font-weight: 600;
}

.creditos-lista {
    
    list-style: none; /* Remove os marcadores (bolinhas) */
    padding: 0;       /* Remove o espaçamento à esquerda padrão da lista */
    margin: 0;        /* Remove margens extras */
}

.creditos-item {
    margin: 5px 0; /* Espaçamento entre os itens */
    font-size: 16px;
}

.creditos-nome {
    font-weight: 600;
}



@media (max-width: 768px) {
    #scroll-content {
        width: 1920px;
        height: 5450px;
        position: absolute;
        transform: scale(0.5); /* Aplica o efeito de escala */
        transform-origin: top left; /* Faz com que a escala ocorra a partir do canto superior esquerdo */
        transition: transform 0.5s ease; /* Suaviza a animação da transformação */
    }
    
    .cards {
        transform: scale(1.012)
    }
    
    .titulo-logo {
        background-image: url('https://s3.glbimg.com/v1/AUTH_8b29beb0cbe247a296f902be2fe084b6/2024/html/retrospectiva-pop/albuns/logo-mobile.png');
        width: 500px; /* Ajuste conforme necessário */
        height: 500px; /* Ajuste conforme necessário */
        top: 50px;
        left: 690px;
    }

    .titulo-texto{
        font-size: 1.8rem;
        width: 738px;
        height: 170px;
        top: 360px;
        left: 560px;

    }

    .titulo-clique{
        font-size: 2rem;
        width: 550px;
        top: 600px;
        left: 650px;

    }

    #modal-content {
       max-height: auto;
       height: auto;
       width: 95vw;
       padding-bottom: 8px;
    }

    #texto-modal {
        padding: 10px;
    }

    #player-wrapper {
        margin-bottom: 8px;
    }

    .button-container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .creditos{
        width: 650px;
        left: 550px;
        top: 4860px;
    }

    .creditos-titulo{
        font-size: 34px;
    }

    .creditos-item{
        font-size: 28px;
    }
}