@charset "utf-8";

/* Estilos Globais */
#cd { float: left; width: 100%;}
#cd .item { position: relative; overflow: hidden;}
#cd .item .imagem { float: left; width: 100%; position: relative;}
#cd .item .imagem .img { float: left; width: 100%;}
#cd .item .imagem .obs { position: absolute; width: 100%; height: 100%; top: 0; left: -120%; background-color: rgba(0, 0, 0, 0.70); background-image: url("../imagens/icoPlay.png"); background-repeat: no-repeat; background-position: 50%;}
#cd .item .imagem .nun { position: absolute; padding: 3px 10px; bottom: -19px; right: 10px; background-color: #140C09; border: 5px solid #FFFFFF; font-weight: bold; text-align: center; font-size: 1.4em; color: #ff0000; display: none; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cd .item .texto { float: left; width: 100%; margin: 10px 0 5px;}
#cd .item .texto h3 { float: left; width: 100%; text-align: center; font-size: 0.9em; color: #140C09;}
#cd .item .texto h3 b { text-transform: uppercase; font-size: 1em;}
#cd .item .texto h3.down { margin: 10px 0 0; text-transform: none; display: none;}
#cd .item .texto h3.play { margin: 10px 0 0; text-transform: none; display: none;}
#cd .item:hover .imagem .obs { left: 0;}
#cd .item:hover .texto h3 { color: #6b3131;}

#lancamentos { background-color: #FFFFFF; float: left; width: 94%; padding: 10px 3%;}
#lancamentos .item { float: left; width: 100%;}

/* Novidades */
#novidades { float: left; width: 94%; background-color: #ff0000; padding: 35px 0 25px; margin: 0 3%;}
#novidades .item { float: left; width: 13.15%; margin: 0 0 20px 3%;}
#novidades .linha2, #novidades .linha3, #novidades .linha4, #novidades .linha5, #novidades .linha6 { clear: left; float: left; width: 100%; height: 1px; display: none;}
#novidades .b100 { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px;}
#novidades #cd { width: 96%; padding: 25px 0 0; margin: 0 2%; background-color: #FFFFFF;}

/* Baixados */
#baixados { float: left; width: 100%; padding: 40px 0 10px;}
#baixados .item { float: left; width: 21.22%; margin: 0 0 12px 3%;}
#baixados .down { display: block !important;}
#baixados .nun { display: block !important;}
#baixados .linha2, #baixados .linha3, #baixados .linha4, #baixados .linha5, #baixados .linha6 { clear: left; float: left; width: 100%; height: 1px; display: none;}

/* Ouvidos */
#ouvidos { float: left; width: 100%; background-color: #E5E5E5; padding: 40px 0 10px;}
#ouvidos .item { float: left; width: 21.22%; margin: 0 0 12px 3%;}
#ouvidos .play { display: block !important;}
#ouvidos .nun { display: block !important;}
#ouvidos .linha2, #ouvidos .linha3, #ouvidos .linha4, #ouvidos .linha5, #ouvidos .linha6 { clear: left; float: left; width: 100%; height: 1px; display: none;}

/* Paredao */
#paredao { float: left; width: 94%; padding: 40px 3%; background-color: #140C09;}
#paredao .item { float: left; width: 94%; padding: 3%; background-color: #FFFFFF; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;}
#paredao #titulo2.mar1 { margin: 0 0 40px; text-align: center;}

/* Mp3 */
#mp3 { float: left; width: 94%; padding: 40px 3% 20px;}
#mp3 .item { float: left; width: 100%;}

/* Albuns */
#albuns { float: left; width: 100%; min-height: 300px; padding: 20px 0;}
#albuns .item { float: left; width: 13.15%; margin: 0 0 20px 3%;}
#albuns .linha2, #albuns .linha3, #albuns .linha4, #albuns .linha5, #albuns .linha6 { clear: left; float: left; width: 100%; height: 1px; display: none;}

/* Carrosel */
#carrosel { float: left; width: 100%; position: relative; z-index: 1;}
#carrosel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none;}
#carrosel .owl-carousel.owl-loaded { display: block;}
#carrosel .owl-carousel.owl-loading { opacity: 0; display: block;}
#carrosel .no-js .owl-carousel { display: block;}
#carrosel .owl-stage-outer { position: relative; overflow: hidden;}
#carrosel .owl-stage-outer .owl-item { float: left; position: relative;  -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;}
#carrosel .owl-nav { position: absolute; top: -30px; right: 0;}
#carrosel .owl-nav button { position: absolute; top: 0; padding: 10px 5px 14px 7px; background-color: #140C09; font-size: 2em; line-height: 0; color: #ff0000; cursor: pointer; border: 0; outline: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#carrosel .owl-nav button.owl-prev { right: 25px;}
#carrosel .owl-nav button.owl-next { right: 0;}
#carrosel .owl-nav button:hover { color: #FFFFFF;}
#carrosel .owl-nav button.disabled { background-color: #CCCCCC; color: #AAAAAA; cursor: auto}
#carrosel .owl-nav button.disabled:hover { background-color: #CCCCCC;}
#carrosel .owl-dots { display: none;}
#carrosel .controle { position: absolute; top: -30px; right: 60px; z-index: 5;}
#carrosel .controle .botao { float: left; padding: 6px 8px 4px; background-color: #140C09; font-weight: bold; font-size: 0.8em; color: #ff0000; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#carrosel .controle .botao:hover { color: #FFFFFF;}
#carrosel .controle .botao.esse { display: none;}
#carrosel.laranja .owl-nav button { background-color: #ff0000; color: #140C09;}
#carrosel.laranja .owl-nav button:hover { color: #FFFFFF;}
#carrosel.laranja .controle .botao { background-color: #ff0000; color: #140C09;}
#carrosel.laranja .controle .botao:hover { color: #FFFFFF;}

/* Exibicd */
#exibicd { float: left; width: 94%; padding: 20px 3% 0;}
#exibicd .lado1 { float: left; width: 24%; position: relative;}
#exibicd .lado2 { float: left; width: 45%; margin: 0 0 0 2%; position: relative;}
#exibicd .lado3 { float: right; width: 27%; position: relative;}
#exibicd .lado4 { float: right; width: 100%; margin: 20px 0 0; position: relative;}
#exibicd .nome { float: left; width: 100%; min-height: 40px; margin: 5px 0 0;}
#exibicd .nome h1 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; line-height: 1.2; font-size: 2em; color: #ff0000;}
#exibicd .nome h2 { float: left; width: 100%; line-height: 1.2; font-size: 1.1em; color: #888888;}
#exibicd .completo { float: left; width: 100%; padding: 30px 0; margin: 5px 0 0; background-color: #140C09; text-transform: uppercase; text-align: center; font-size: 1.2em; color: #FFFFFF;}
#exibicd .completo b { padding: 0 0 0 30px; background-image: url('../imagens/download.png'); background-position: 0 50%; background-repeat: no-repeat; text-transform: uppercase;}
#exibicd .completo:hover { background-color: #ff0000;}
#exibicd .capa { float: left; width: 100%; margin: 8px 0 0;}
#exibicd .capa .imagem { float: left; width: 100%; position: relative; cursor: pointer;}
#exibicd .capa .imagem .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url("../imagens/icoPlay.png"); background-color: rgba(0,0,0,0.40); background-repeat: no-repeat; background-position: 50%;}
#exibicd .capa .imagem:hover .obs { background-color: rgba(0,0,0,0.70);}
#exibicd .capa .imagem .img { float: left; width: 100%;} #play.jp-state-playing .capa .imagem .obs { background-image: url("../imagens/icoPausa.png");}
#exibicd .descricao { float: left; width: 100%; margin: 10px 0 0;}
#exibicd .descricao h5 { float: left; width: 100%; font-size: 1em; display: none;}
#exibicd .compartilhar { float: left; width: 100%; padding: 5px 0 3px; margin: 10px 0 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; text-align: center; font-size: 0;}
#exibicd .compartilhar strong { display: none;}
#exibicd .compartilhar img { margin: 0 5px;}
#exibicd .compartilhar img:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}
#exibicd .compartilhar a.zap2 { display: none;}
#exibicd .formcurtir { position: absolute; top: 15px; border: 1px solid #AAAAAA; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#exibicd .formcurtir.a { right: 72px;}
#exibicd .formcurtir.b { right: 0;}
#exibicd .formcurtir .botao { float: left; width: 30px; height: 30px; background-color: rgba(0,0,0,0.00); background-repeat: no-repeat; background-position: 50%; cursor: pointer; font-size: 0; outline: 0; border: 0;}
#exibicd .formcurtir .botao.curtir { background-image: url(../imagens/icoCurtir.png);}
#exibicd .formcurtir .botao.ncurtir { background-image: url(../imagens/icoNcurtir.png);}
#exibicd .formcurtir .campo { float: left; width: 30px; margin: 7px 4px 0 0; background-color: rgba(0,0,0,0.00); text-align: center; font-weight: bold; color: #140C09;}
#exibicd .contagens { float: left; width: 99.5%;}
#exibicd .contagens .nuns { width: 48%; text-align: center; font-size: 0.9em;}
#exibicd .contagens .nuns.a { float: left; }
#exibicd .contagens .nuns.b { float: right;}
#exibicd .contagens .nuns .campo { float: left; width: 100%; padding: 7px 0 5px; margin: 0 0 3px; border: 1px solid #140C09; text-align: center; font-weight: bold; font-size: 1em; color: #140C09; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
#exibicd .contagens .nuns .oque { float: left; width: 100%; padding: 10px 0; border: 1px solid #140C09; background-color: #140C09; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em; color: #00bf00; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
#exibicd .comentarios { float: left; width: 96%; padding: 20px 2%; background-color: #EEEEEE;}
#exibicd .youtube { float: left; width: 100%; margin: 12px 0 0;}
#exibicd .youtube .iframe { position: relative; width: 100%; padding-bottom: 56%; overflow: hidden;}
#exibicd .youtube .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/* Playlist */
#exibicd .playlist { float: left; width: 95.5%; max-height: 342px; padding: 0 2%; margin: 10px 0 0; border: 1px solid #CCCCCC; overflow: hidden;}
#exibicd .playlist .faixa { float: left; width: 100%; padding: 12px 0; margin: 0 0 -1px; border-bottom: 1px solid #CCCCCC; font-size: 1em; position: relative; overflow: hidden; list-style: none;}
#exibicd .playlist .faixa .fno { float: left; margin: 5px 0 0; font-weight: normal; font-size: 0.8em; color: #140C09; overflow: hidden; }
#exibicd .playlist .faixa .play { float: right; width: 25px; height: 25px; background-color: transparent; background-image: url("../includes/play/imagens/listaPlay2.png?d"); background-size: 25px; background-position: 50% 100%; background-repeat: no-repeat; cursor: pointer; outline: 0; border: 0;}
#exibicd .playlist .faixa .play:hover { background-position: 50% 0;}
#exibicd .playlist .faixa .play.ativo { background-image: url("../includes/play/imagens/listaPausa2.png?s");}
#exibicd .playlist .faixa .baixar { float: right; width: 25px; height: 25px; margin: 0 3px 0 0; background-image: url("../includes/play/imagens/listaDown2.png?d"); background-size: 25px; background-position: 50% 100%; background-repeat: no-repeat;}
#exibicd .playlist .faixa .baixar:hover { background-position: 50% 0;}
#exibicd .playlist.expandindo { max-height: 1000px;}

/* Mostrar mais */
#exibicd .mostrar { float: left; width: 99.5%; cursor: pointer;}
#exibicd .mostrar .botao { float: left; width: 100%; padding: 6px 0 4px; margin: 4px 0 0; background-color: #ff0000; border: 1px solid #ff0000; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 1em; color: #140C09;}
#exibicd .mostrar .botao:hover { background-color: #140C09; border: 1px solid #140C09; color: #ff0000;}
#exibicd .mostrar .botao.esconder { display: none;}

/* Media Queries */
@media only screen and (min-width: 1001px) {
    #novidades .linha2, #novidades .linha3, #novidades .linha4, #novidades .linha5, #novidades .linha6 { display: none;}
    #novidades .linha6 { display: block;}
    
    #albuns .linha2, #albuns .linha3, #albuns .linha4, #albuns .linha5, #albuns .linha6 { display: none;}
    #albuns .linha6 { display: block;}
    
    #baixados .linha2, #baixados .linha3, #baixados .linha4, #baixados .linha5, #baixados .linha6 { display: none;}
    #baixados .linha4 { display: block;}
    
    #ouvidos .linha2, #ouvidos .linha3, #ouvidos .linha4, #ouvidos .linha5, #ouvidos .linha6 { display: none;}
    #ouvidos .linha4 { display: block;}
}

@media only screen and (max-width: 1000px) {
    /* Regras para o menu Mobile */
    header {
        position: relative; /* Necessário para o posicionamento do menu */
    }

    header .mobile {
        display: block; /* Mantém o menu hamburger visível */
    }
    
    header .mobile.desativa {
        display: none;
    }
    
    header .descktop {
        display: block; /* Permite a transição */
        position: fixed; /* O menu flutua sobre o resto do conteúdo */
        top: 0;
        left: -100%; /* Move o menu para fora da tela, à esquerda */
        width: 70%; /* Define a largura do menu. Ajuste este valor se precisar. */
        height: 100vh; /* Ocupa a altura total da tela */
        background-color: #140C09; /* Fundo do menu: cor escura do seu site */
        transition: left 0.3s ease-in-out; /* Transição suave para o movimento */
        z-index: 1000; /* Garante que o menu fique por cima de outros elementos */
        overflow-y: auto; /* Adiciona barra de rolagem se o conteúdo for grande */
    }

    header .descktop.ativa {
        left: 0; /* Desliza o menu para a posição visível */
    }

    /* Estilos dos itens do menu */
    header .links a { 
        color: #ff0000; /* Cor vermelha para os links */
        width: 96%; 
        padding: 20px 2% 18px; 
        margin: 0; 
        float: left;
    }
    
    header .links a:hover {
        background-color: #ff0000;
        color: #FFFFFF;
    }

    /* Suas regras originais que não foram modificadas */
    #cd .item .texto h3 { font-size: 0.8em;}
    #novidades .item { width: 29.32%;}
    #novidades .linha3 { display: block;}
    #albuns .item { width: 29.32%;}
    #albuns .linha3 { display: block;}
    #exibicd .lado1 { width: 28%;}
    #exibicd .lado2 { float: right; width: 70%;}
    #exibicd .lado3 { width: 100%; margin: 20px 0 0;}
    #exibicd .compartilhar a.zap1 { display: none;}
    #exibicd .compartilhar a.zap2 { display: contents;}
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
    #baixados .item { width: 47%;}
    #ouvidos .item { width: 47%;}
    #exibicd { padding: 5px 3% 0;}
    #exibicd .lado1 { width: 100%;}
    #exibicd .lado2 { width: 100%; margin: 20px 0 0;}
    
    #baixados .linha2, #baixados .linha3, #baixados .linha4, #baixados .linha5, #baixados .linha6 { display: none;}
    #baixados .linha2 { display: block;}
    
    #ouvidos .linha2, #ouvidos .linha3, #ouvidos .linha4, #ouvidos .linha5, #ouvidos .linha6 { display: none;}
    #ouvidos .linha2 { display: block;}
}

@media only screen and (max-width: 600px) {
    #novidades .item { width: 45.5%;}
    #albuns .item { width: 45.5%;}
    
    #novidades .linha2, #novidades .linha3, #novidades .linha4, #novidades .linha5, #novidades .linha6 { display: none;}
    #novidades .linha2 { display: block;}
    
    #albuns .linha2, #albuns .linha3, #albuns .linha4, #albuns .linha5, #albuns .linha6 { display: none;}
    #albuns .linha2 { display: block;}

    #baixados .item { width: 45.4%;}
    #ouvidos .item { width: 45.4%;}

    #baixados .linha2, #baixados .linha3, #baixados .linha4, #baixados .linha5, #baixados .linha6 { display: none;}
    #baixados .linha2 { display: block;}

    #ouvidos .linha2, #ouvidos .linha3, #ouvidos .linha4, #ouvidos .linha5, #ouvidos .linha6 { display: none;}
    #ouvidos .linha2 { display: block;}
    
    #exibicd .lado1 { width: 100%;}
    #exibicd .lado2 { width: 100%; margin: 20px 0 0;}
    #exibicd .lado3 { width: 100%; margin: 20px 0 0;}
    
    #exibicd .formcurtir { float: left; position: relative; margin: 8px 0 0;}
    #exibicd .formcurtir.a { top: 0; right: 0; margin-left: 0;}
    #exibicd .formcurtir.b { top: 0; right: 0; margin-left: 5px;}
}
/* Centraliza e estiliza o container da paginação */
.paginacao {
    display: flex;
    justify-content: center; /* Esta linha centraliza horizontalmente os botões */
    align-items: center;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    gap: 5px; /* Adiciona um espaço entre os botões */
}

/* Estilo para os botões e os três pontos */
.paginacao a,
.paginacao span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* Estilo do botão ao passar o mouse */
.paginacao a:hover {
    background-color: #f0f0f0;
}

/* Estilo do botão da página ativa */
.paginacao a.active {
    background-color: #ff0000;
    color: white;
    border-color: #ff0000;
    font-weight: bold;
}

/* Estilo para os três pontos (...) */
.paginacao span {
    border: none;
    padding: 8px 0;
    cursor: default;
    color: #999;
}
/* Adicione esta classe para corrigir o problema de posicionamento */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Garante que o container da paginação use a largura total para centralizar */
.paginacao {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    /* (O restante do estilo da paginação que você já tinha) */
    align-items: center;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    gap: 5px;
}