.sobre_projeto {background: var(--bg-azul-medio-meio);}      
.convite .content {padding: 2rem; max-width: 40rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); border: 5px solid var(--branco); box-shadow: var(--sombra-lateral);}    
.convite b, .convite strong {color: var(--amarelo);}
.historia_jogo, .resumo {background:var(--bg-azul-escuro-baixo); box-shadow: var(--sombra);}     
.sobre_jogo .bg-img {object-position: top;}
.sobre_jogo .content {display: flex; flex-direction: row; gap: 3rem;}
.sobre_jogo .parte {padding: 0 2rem; width: 50%;}
.sobre_jogo h2 {margin-bottom: 0;}
.sobre_jogo h3 {text-align: center;}
.sobre_jogo a {color: var(--amarelo); font-weight: 900; text-decoration: underline;}     
.resumo h4 {padding: 2rem; text-indent: 0; max-width: 50rem; color: var(--azul); text-align: center; margin: 1.5rem auto; border: 2px solid var(--branco); background-color: var(--azul-escuro); font-size: clamp(1.2rem, 2.5vw, 1.5rem); box-shadow: 5px 5px 22px rgba(136, 136, 136, 0.329), 0 6px 40px var(--azul);}
.resumo h4 b {color: var(--amarelo); font-size: clamp(1.2rem, 2.5vw, 1.5rem);}     
.info_jogo {box-shadow: var(--sombra-section)}
.info_jogo b {color: var(--amarelo);}     
.consideracoes {box-shadow: var(--sombra);}
.consideracoes p {color: var(--amarelo); font-weight: bold;}
.consideracoes strong {color: var(--azul);}     
.referencias {box-shadow: var(--sombra-section);}        
.referencias .bg-img-cover {object-position: center;}
.referencias .container {display: flex; justify-content: center; column-gap: 40px;}
.referencias h3 {color: var(--azul);}
.referencias ul li {text-align: left; color: var(--amarelo); font-weight: bold;}          
.duvidas {display: block; background: #9ac9ff url(/src/assets/Image/fag3.png) no-repeat center/cover; background-attachment: fixed; box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.7), inset -5px -5px 85px rgba(0, 0, 0, 0.5);}
.duvidas h1 {text-shadow: 2px 2px 8px rgba(0,0,0,0.5);}
.duvidas ol li::marker {color: var(--amarelo);}
.duvidas .acordeon {width: 700px; width: 90%; margin: 0 auto;}
.acordeon .item {width: 100%; margin: 5px 0; overflow: hidden; color: var(--branco); border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; background: linear-gradient(135deg, #0176fb, #01018f); box-shadow: inset 0 -3px 10px rgb(0, 0, 0), 5px 5px 15px rgb(0, 0, 0);}
.acordeon input {display: none;}
.acordeon .titulo {gap: 0.5rem; margin-right: 2rem; color: var(--amarelo); cursor: pointer; font-weight: 700;}
.acordeon .icon {display: inline-block; font-size: 2rem; color: #fff; height: 60px; width: 50px; line-height: 60px; text-align: center; transition: transform 0.3s ease; background: var(--bg-azul); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}
.acordeon .icon::before {content: "+";}
.acordeon input:checked + .titulo .icon::before {content: "-";}
.acordeon label {display: flex; align-items: center; font-size: clamp(1.4rem, 2.5vw, 1.5rem);}
.acordeon .conteudo {max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease; padding: 0 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; background-color: var(--azul-medio); text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}
.acordeon input:checked + .titulo + .conteudo {opacity: 1; max-height: 500px; padding: 2rem; text-shadow: var(--sombra-letras); box-shadow: inset 0 -3px 10px rgba(0,0,0,0.5), 5px 5px 15px rgba(0,0,0,0.3);}

@media (max-width: 768px) { 
.sobre_jogo .content {display: flex; flex-direction: column; align-items: center;gap: 0;}
.sobre_jogo .parte {width: 100%; max-width: 500px;}
.sobre_jogo .destaque {padding: 2rem; text-indent: 0; max-width: 40rem; color: var(--azul); margin: 1.5rem auto; border: 2px solid var(--branco); background-color: var(--azul-escuro); box-shadow: 5px 5px 22px rgba(136, 136, 136, 0.329), 0 6px 40px var(--azul);}
.sobre_jogo .destaque strong, .destaque b {color: var(--amarelo);}
.referencias .container {display: block;}
.referencias .container h3 {text-align: left;}}