body{
    font-family: "Roboto", sans-serif; 
}

.cabecalho{
    background-color: rgb(44, 13, 58);
    display: flex; /* Ver melhor essa propriedade 'pais e filhos' */
    justify-content: center; /* pq nao usar o 'text-align: center'? */
    padding: 10px;
    margin-bottom: 60px;
}

.container{
    background-color: rgb(255, 255, 255);
    max-width: 1170px;
    margin: 0 auto; /* o 'auto' pega o espaço em branco e divide em dois */
}

.container .produtos{
    background-color: rgb(255, 255, 255);
    color: #7926b8;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 32px;
    line-height: 32px;
    letter-spacing: 2px;
}

.container .filtros{
    background-color: rgb(252, 252, 252);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.container .categorias-cartas, .container .preco-cartas{
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    width: 40%;
}

.container label{
    background-color: rgb(255, 255, 255);
    letter-spacing: 2px;
    font-weight: 500;
    color: #7926b8;
}

.container .categorias-cartas select, .container .preco-cartas input{
    padding: 16px 13px;
    border-radius: 2px;
    border: 2px solid #7d56c0;
    background-color: rgb(247, 245, 245);
    color: rgb(0, 0, 0);
    height: 52px;
}

.container select:focus, .container input:focus, .container select:focus-visible, .container input:focus-visible {
    outline: none;
}

.container select.categoria{
    appearance: none;
    background: url(../imagens/seta-para-baixo.png) 97% center no-repeat;
}

.container .filtros .btn-filtrar{
    border: none;
    background-color: #7926b8; /* Cor de fundo do botao "Aplicar filtros" */ 
    color: rgb(255, 255, 255);
    padding: 16px 32px;
    font-weight: 500;
    align-self: end;
    width: 177px;
    height: 52px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: 0.3s;
}

.container .filtros .btn-filtrar:hover{
    background-color: #421168; /* Efeito ao passar o mouse no botão "Aplicar filtros" */
}

.container .cartas{ /* Fundo das cartas */
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
}

.container .cartas .carta{
    max-width: 365px;
    background-color: rgb(235, 235, 235); /* Cor do fundo das cartas */
    color: rgb(173, 24, 19);
    border-radius: 20px;
    box-shadow: 0 6px 12px rgb(0,0,0,0.5); /* Sombra no quadro da carta */
}

.container .carta img{
    width: 100%;
    padding: 20px;
}

.container .carta .informacoes{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: aliceblue;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.container .carta .informacoes .nome-personagem{
    font-size: 24px;
    font-weight: 700;
    color: rgb(0, 0, 0); /* Cor do nome do personagem */
}

.container .carta .informacoes .categoria{
    color: rgb(128, 128, 128); /* Cor do nome da categoria */
    font-weight: 700;
}

.container .carta .informacoes .preco{
    font-size: 24px;
    color: #4D8E5C; /* Cor do preço da carta */
    font-weight: 700;
    letter-spacing: 2px;
}

.container .carta .informacoes .btn-comprar{
    color: rgb(255, 255, 255); /* Cor do texto "Comprar" */
    background-color: #7926b8; /* Cor de fundo do botao "Comprar" */ 
    letter-spacing: 2px;
    padding: 16px;
    border-radius: 4px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.container .carta .informacoes .btn-comprar:hover{
    background-color: #421168; /* Efeito ao passar o mouse no botão "Comprar" */
}

.rodape{
    background-color: #7926b8;
    display: flex;
    justify-content: center;
    color: rgb(255, 255, 255);
    padding: 20px;
    margin-top: 60px;
}

.esconder{
    display: none;
}

.mostrar{
    display: block;
}