@charset "utf-8";

#exibiblog { float: left; width: 70%; padding: 30px 0 0; margin-left: 15%;}
#exibiblog h1 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 2em; color: #222222;}
#exibiblog h2 { float: left; width: 100%; font-size: 1.2em; color: #555555;}
#exibiblog .compartilhar { float: left; width: 100%; padding: 8px 0; margin: 10px 0; border-top: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; color: #000000;}
#exibiblog .compartilhar strong { float:left; padding: 7px 5px 0 0; font-weight:normal; font-size:0.9em; color:#555555;}
#exibiblog .compartilhar a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f5f5f5; color: #333; transition: .2s;}
#exibiblog .compartilhar a:hover { background: #1877F2; color: #fff; transform: scale(1.08);}
#exibiblog .compartilhar svg { width: 22px; height: 22px;}

#exibiblog .video { float: left; width: 100%;}
#exibiblog .video .iframe { position: relative; width: 98%; padding-bottom: 55%; margin: 8px 0 8px 1%; overflow: hidden;}
#exibiblog .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#exibiblog .imagem { float: left; width: 100%;}
#exibiblog .imagem img { float: left; max-width: 100%;}
#exibiblog .texto { float: left; width: 100%;}
#exibiblog .texto iframe { max-width: 100%;}
#exibiblog .texto img { max-width: 100%;}

#exibicds { width: 100%; max-width: 1180px; box-sizing: border-box; margin: 116px auto 0; padding: 30px 20px 60px;}
#exibicds h1 { display: none; margin: 0 0 12px; font-weight: 900; font-size: clamp(2em, 3vw, 3em); line-height: 1.08; letter-spacing: -0.01em; color: #191919;}
#exibicds .hero { display: grid; grid-template-columns: 42% 1fr; grid-auto-rows: auto; align-items: start; gap: 48px;}
#exibicds .capa { grid-column: 1; grid-row: 1; width: 100%; margin: 0; position: relative; cursor: pointer; overflow: hidden; border-radius: 10px; box-shadow: 0 20px 45px rgba(0,0,0,0.20);}
#exibicds .capa .imagem { display: block; width: 100%; transition: transform 0.45s ease;}
#exibicds .capa:hover .imagem { transform: scale(1.045);}
#exibicds .capa .obs { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.20); transition: background-color 0.3s ease;}
#exibicds .capa .obs img { opacity: 0.5; transition: opacity 0.3s ease;}
#exibicds .capa:hover .obs { background-color: rgba(0,0,0,0.45);}
#exibicds .capa:hover .obs img { opacity: 1;}
#exibicds .hero-info { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column;}

#exibicds .metadados { display: flex; align-items: center; gap: 22px; padding-top: 5px;}
#exibicds .metadados .baixarcd { display: inline-flex; align-items: center; margin: 0; padding: 11px 22px; background-color: #990000; border-radius: 999px; text-align: left; font-size: 0.95em; font-weight: 700; letter-spacing: 0.01em; color: #FFFFFF; text-decoration: none; transition: background-color 0.2s ease;}
#exibicds .metadados .baixarcd:hover { background-color: #550000;}
#exibicds .metadados .baixarcd .ico { width: 15px; vertical-align: middle;}
#exibicds .metadados .baixarcd .des { margin-left: 6px;}
#exibicds .metadados .compartilhar { display: flex; gap: 10px; align-items: center;}
#exibicds .metadados .compartilhar a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background: #E8E8E8; color: #000000; transition: .2s;}
#exibicds .metadados .compartilhar a:hover { background: #990000; color: #fff; transform: scale(1.08);}
#exibicds .metadados .compartilhar svg { width: 18px; height: 18px;}
#exibicds .metadados .contagens { display: flex; flex-direction: column;}
#exibicds .metadados .contagens .nuns { display: flex; align-items: baseline; gap: 5px; text-align: left; font-size: 0.9em;}
#exibicds .metadados .contagens .nuns .campo { width: 70px; background-color: transparent; text-align: left; font-weight: 700; color: #191919; border: 0; outline: 0;}
#exibicds .metadados .contagens .nuns .nome { font-weight: 400; color: #990000; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.03em;}

#exibicds .descricao { display: flex; gap: 10px; margin: 25px 0; font-size: 0.9em; color: #555555;}
#exibicds .descricao div.data { padding: 0 0 0 8px; border-left: 1px solid #555555;}

#exibicds .tabmusicas { width: 100%; padding: 0;}
#exibicds .tabmusicas .musicas { width: 100%;}
#exibicds .tabmusicas .musicas.expandindo { height: auto; max-height: 10000px; }
#exibicds .tabmusicas .musicas::-webkit-scrollbar { display: none;}
#exibicds .tabmusicas .musicas .faixas { display: block; width: 100%; padding: 0 0 2px; font-size: 0.76em; font-weight: 700; letter-spacing: 0.14em; color: #ADADAD; text-transform: uppercase;}
#exibicds .tabmusicas .musicas ul { width: 100%; list-style-type: none; margin: 0; padding: 0;}
#exibicds .tabmusicas .musicas li { position: relative; overflow: hidden; padding: 11px 15px; margin: 0; border-bottom: 1px solid #EEEEEE; transition: background-color 0.18s ease, padding-left 0.18s ease;}
#exibicds .tabmusicas .musicas li:last-child { border-bottom: 0;}
#exibicds .tabmusicas .musicas li:hover { background-color: #FAFAFA; padding-left: 10px;}
#exibicds .tabmusicas .musicas .jp-playlist-item { display: block; width: 100%; padding: 0 80px 0 0; font-size: 1em; font-weight: 500; color: #444444; letter-spacing: 0.01em; line-height: 1; outline: 0; box-sizing: border-box;}
#exibicds .tabmusicas .musicas li.jp-playlist-current { background-color: #efe5e3;}
#exibicds .tabmusicas .musicas li.jp-playlist-current::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #990000;}
#exibicds .tabmusicas .musicas .jp-playlist-item.jp-playlist-current { color: #990000;}
#exibicds .tabmusicas .musicas a { display: block; width: 100%; padding: 0; text-decoration:none; font-size:1em; color: #222222;}
#exibicds .tabmusicas .musicas .baixar { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 24px; top: 50%; right: 10px; margin: -12px 0 0; background-color: #FF2A2A; border-radius: 5px; font-size: 0.9em; font-weight: bold; color: #FFFFFF; opacity: 0.8;}
#exibicds .tabmusicas .musicas .baixar:hover { opacity: 1;}
#exibicds .tabmusicas .musicas .tocar { position: absolute; width: 24px; height: 24px; top: 50%; right: 62px; margin: -12px 0 0; background: url("../play/imagens/play.png"); background-position: 50%; background-repeat: no-repeat; background-size: 100%; opacity: 0.8;}
#exibicds .tabmusicas .musicas .tocar:hover { opacity: 1;}
#exibicds .linha { width: 100%; height: 1px; margin: 20px 0; background-color: #E6E6E6;}

#exibicds .anuncioCd { width: 100%; margin: 60px 0 0; text-align: center;}
#exibicds .google-auto-placed { overflow: auto;}

@media only screen and (max-width: 1000px) {
	#exibiblog { width: 90%; margin-left: 5%;}
}
@media only screen and (max-width: 800px) {
	#exibiblog { width: 100%; margin-left: 0;}
}
@media only screen and (max-width: 600px) {
	#exibiblog h1 { font-size: 1.4em;}
	#exibiblog { padding: 5px 0 0;}
}

@media only screen and (max-width: 1100px) {
	#exibicds .hero { grid-template-columns: 40% 1fr; gap: 36px;}
}
@media only screen and (max-width: 900px) {
	#exibicds { padding: 30px 2% 50px;}
	#exibicds .hero-info { width: 96%;}
	#exibicds .hero { grid-template-columns: 1fr; gap: 28px;}
	#exibicds .capa, #exibicds .hero-info { grid-column: auto; grid-row: auto;}
	#exibicds .capa { max-width: 420px; margin: 0 auto;}
	#exibicds h1 { text-align: center;}
	#exibicds .metadados { justify-content: center; text-align: center;}
}
@media only screen and (max-width: 700px) {
	#exibicds .metadados { flex-direction: column; align-items: flex-start; gap: 16px;}
	#exibicds h1 { text-align: left;}
	#exibicds .capa { max-width: 100%;}
}
@media only screen and (max-width: 600px) {
	#exibicds h1 { font-size: clamp(1.8em, 8vw, 2.4em);}
}
@media only screen and (max-width: 500px) {
	#exibicds .capa { max-width: 100%;}
	#exibicds .metadados .contagens { padding: 12px 0; border-top: 1px solid #E6E6E6;}
}
@media only screen and (max-width: 400px) {
	#exibicds { margin: 0 auto; padding-top: 30px;}
}