/* =========================================================
   Loja — balcão com a turma, grade de produtos e página do produto
   ========================================================= */

/* ---------- Balcão: a turma espia por trás do painel de busca ---------- */

.faixa {
    position: relative;
    margin-top: var(--e5);
    padding-top: 158px;
}

.faixaTurma {
    position: absolute;
    top: 0;
    right: var(--e6);
    z-index: 1;
    width: 230px;
    height: 168px;
}

.faixaTurma .turma {
    --escala: 0.5;
    --corAlto: var(--cobalto);
}

.balcao {
    position: relative;
    z-index: 2;
    padding: var(--e6);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 24px;
}

.balcaoTitulo {
    margin: 0 0 var(--e1);
    font-size: var(--texto32);
    line-height: 1.1;
    font-weight: 780;
    font-stretch: 82%;
    letter-spacing: -0.025em;
}

.balcaoApoio {
    margin: 0;
    color: var(--textoSuave);
}

.busca {
    display: flex;
    gap: var(--e3);
    margin-top: var(--e5);
}

.buscaCaixa {
    position: relative;
    flex: 1;
}

.buscaCaixa svg {
    position: absolute;
    top: 50%;
    left: var(--e4);
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: var(--textoFraco);
    pointer-events: none;
}

.buscaEntrada {
    padding-left: 48px;
    background: var(--fundo);
}

.buscaEntrada::-webkit-search-cancel-button {
    filter: invert(1) opacity(0.6);
}

.resultadoBusca {
    margin: var(--e5) 0 0;
    color: var(--textoSuave);
}

.resultadoBusca strong {
    color: var(--texto);
}

/* ---------- Grade ---------- */

.grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e5);
    margin-top: var(--e6);
}

.areaLista > .vazio {
    margin-top: var(--e6);
}

.cartao {
    position: relative;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 18px;
    transition: border-color var(--rapido) ease, opacity var(--medio) ease, transform var(--medio) var(--curva);
}

.cartao:hover {
    border-color: var(--linhaForte);
}

.cartao.saindo {
    opacity: 0;
    transform: scale(0.96);
}

.cartaoLink {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cartaoLink:focus-visible {
    outline-offset: -3px;
    border-radius: 18px;
}

.cartaoImagem {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--superficieAlta);
}

.cartaoImagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--curva);
}

.cartao:hover .cartaoImagem img {
    transform: scale(1.04);
}

.cartaoPrevia {
    position: absolute;
    left: var(--e3);
    bottom: var(--e3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    font-size: var(--texto13);
    font-weight: 650;
    color: var(--texto);
    background: rgba(12, 14, 26, 0.78);
    border-radius: 99px;
}

.cartaoPrevia svg {
    width: 14px;
    height: 14px;
    color: var(--amarelo);
}

.cartao {
    display: flex;
    flex-direction: column;
}

.cartaoTitulo {
    display: -webkit-box;
    margin: 0;
    padding: var(--e3) var(--e4) 0;
    overflow: hidden;
    font-size: var(--texto16);
    font-weight: 650;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Preço e botões de compra ---------- */

.cartaoRodape {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    margin-top: auto;
    padding: var(--e2) var(--e4) var(--e4);
}

.cartaoPreco {
    margin: 0;
    font-size: var(--texto20);
    font-weight: 780;
    font-stretch: 85%;
    font-variant-numeric: tabular-nums;
    color: var(--amarelo);
}

.cartaoPreco.comprado,
.produtoPreco.comprado {
    font-size: var(--texto15);
    font-weight: 650;
    font-stretch: 100%;
    color: var(--sucesso);
}

.acoesProduto {
    display: flex;
    gap: var(--e2);
}

.acoesProduto form {
    margin: 0;
}

.formComprar {
    flex: 1;
}

.acoesProduto .botao {
    min-height: 42px;
    width: 100%;
    padding: 0 var(--e3);
    font-size: var(--texto15);
    border-radius: 12px;
}

.botaoCarrinhoProduto {
    width: 42px !important;
    padding: 0 !important;
}

.botaoCarrinhoProduto[aria-pressed="true"] {
    color: var(--tinta);
    background: var(--amarelo);
    box-shadow: none;
}

.botaoBaixar {
    flex: 1;
    color: var(--tinta);
    background: var(--sucesso);
}

.botaoBaixar:hover {
    background: #26b886;
}

/* Na página do produto os botões são maiores e o do carrinho tem texto */
.acoesProduto.grande {
    flex-wrap: wrap;
    max-width: 30rem;
}

.acoesProduto.grande .botao {
    min-height: 52px;
    font-size: var(--texto16);
}

.acoesProduto.grande .formComprar {
    flex: 1 1 160px;
}

.acoesProduto.grande .botaoCarrinhoProduto {
    width: auto !important;
    padding: 0 var(--e5) !important;
}

/* ---------- Coração ---------- */

.formFavorito {
    margin: 0;
}

.botaoFavorito {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background: rgba(12, 14, 26, 0.72);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--rapido) ease, color var(--rapido) ease;
}

.botaoFavorito:hover {
    background: rgba(12, 14, 26, 0.92);
}

.botaoFavorito svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.botaoFavorito[aria-pressed="true"] {
    color: var(--rosa);
}

.botaoFavorito[aria-pressed="true"] svg {
    fill: currentColor;
}

.botaoFavorito.pulsou svg {
    animation: pulsar 360ms var(--curva);
}

@keyframes pulsar {
    40% {
        transform: scale(1.3);
    }
}

.cartao .favoritoPosicao {
    position: absolute;
    top: var(--e3);
    right: var(--e3);
    z-index: 2;
}

/* ---------- Página do produto ---------- */

.voltar {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    margin: var(--e5) 0;
    font-size: var(--texto15);
    font-weight: 600;
    color: var(--textoSuave);
    text-decoration: none;
}

.voltar:hover {
    color: var(--texto);
}

.voltar svg {
    width: 18px;
    height: 18px;
}

.produto {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--e7);
    align-items: start;
    margin-bottom: var(--e8);
}

.produtoMidia {
    overflow: hidden;
    background: #000;
    border: 1px solid var(--linha);
    border-radius: var(--raioCard);
}

.produtoMidia video,
.produtoMidia img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    margin: 0 auto;
}

.produtoInfo {
    position: sticky;
    top: 140px;
}

.produtoTitulo {
    margin: 0 0 var(--e4);
    font-size: var(--texto44);
    line-height: 1.05;
    font-weight: 780;
    font-stretch: 82%;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.produtoPreco {
    margin: 0 0 var(--e5);
    font-size: var(--texto32);
    font-weight: 800;
    font-stretch: 80%;
    font-variant-numeric: tabular-nums;
    color: var(--amarelo);
}

.produtoNota {
    max-width: 30rem;
    margin: var(--e4) 0 0;
    font-size: var(--texto13);
    color: var(--textoFraco);
}

.produtoDescricao {
    margin: 0 0 var(--e6);
    max-width: 34rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--textoSuave);
}

/* ---------- Páginas simples (carrinho, Pix, compras) ---------- */

.paginaTopo {
    margin: var(--e7) 0 var(--e6);
}

.paginaTitulo {
    margin: 0;
    font-size: var(--texto44);
    line-height: 1.05;
    font-weight: 780;
    font-stretch: 80%;
    letter-spacing: -0.03em;
}

.paginaApoio {
    max-width: 40rem;
    margin: var(--e2) 0 0;
    color: var(--textoSuave);
}

/* ---------- Carrinho ---------- */

.carrinho {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--e6);
    align-items: start;
    margin-bottom: var(--e8);
}

.carrinhoLista {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raioCard);
}

.carrinhoItem {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e4);
}

.carrinhoItem + .carrinhoItem {
    border-top: 1px solid var(--linha);
}

.carrinhoImagem,
.compraImagem {
    flex: none;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--superficieAlta);
}

.carrinhoInfo,
.compraInfo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.carrinhoTitulo,
.compraTitulo {
    font-weight: 650;
    color: var(--texto);
    text-decoration: none;
}

.carrinhoTitulo:hover,
.compraTitulo:hover {
    text-decoration: underline;
}

.carrinhoPreco {
    font-weight: 750;
    color: var(--amarelo);
    font-variant-numeric: tabular-nums;
}

.carrinhoItem form {
    margin: 0;
}

.botaoRemover {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--textoFraco);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.botaoRemover:hover {
    color: var(--erro);
    background: var(--erroFundo);
}

.botaoRemover svg {
    width: 20px;
    height: 20px;
}

.resumo {
    position: sticky;
    top: 140px;
    padding: var(--e5);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raioCard);
}

.resumoTitulo {
    margin: 0 0 var(--e4);
    font-size: var(--texto20);
    font-weight: 720;
}

.resumoLinha {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--e3);
    color: var(--textoSuave);
    font-variant-numeric: tabular-nums;
}

.resumoTotal {
    margin: var(--e4) 0 var(--e5);
    padding-top: var(--e4);
    font-size: var(--texto20);
    font-weight: 780;
    color: var(--texto);
    border-top: 1px solid var(--linha);
}

.resumoNota {
    margin: var(--e3) 0 0;
    font-size: var(--texto13);
    color: var(--textoFraco);
}

/* ---------- Pix ---------- */

.pix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e7);
    align-items: start;
    margin-bottom: var(--e8);
    padding: var(--e6);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 24px;
}

.pixQr {
    padding: var(--e4);
    background: #fff;
    border-radius: var(--raioCard);
}

.pixQr img {
    width: 240px;
    height: 240px;
    image-rendering: pixelated;
}

.pixPassos {
    margin: 0 0 var(--e5);
    padding-left: 1.2em;
    color: var(--textoSuave);
    line-height: 1.7;
}

.pixPassos strong {
    color: var(--texto);
}

.copiaCola {
    display: flex;
    gap: var(--e3);
}

.copiaCola .campoEntrada {
    flex: 1;
    font-size: var(--texto13);
    color: var(--textoSuave);
    text-overflow: ellipsis;
}

.pixAguardando {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin: var(--e5) 0 0;
    color: var(--textoSuave);
}

.pixAguardando .botaoGiro {
    display: block;
    border-color: var(--linha);
    border-top-color: var(--amarelo);
}

.confirmado {
    display: grid;
    justify-items: center;
    gap: var(--e3);
    max-width: 36rem;
    margin: 0 auto var(--e8);
    padding: var(--e7) var(--e5);
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 24px;
}

.confirmadoIcone {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--tinta);
    background: var(--sucesso);
    border-radius: 50%;
}

.confirmadoIcone svg {
    width: 32px;
    height: 32px;
}

.confirmadoTitulo {
    margin: var(--e2) 0 0;
    font-size: var(--texto32);
    line-height: 1.1;
    font-weight: 780;
    font-stretch: 85%;
}

.confirmadoTexto {
    max-width: 28rem;
    margin: 0 0 var(--e3);
    color: var(--textoSuave);
}

.baixarLista {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.baixarItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e3) 0;
    border-top: 1px solid var(--linha);
}

.baixarItem .botao {
    flex: none;
}

/* ---------- Minhas compras ---------- */

.compras {
    display: grid;
    gap: var(--e3);
    margin: 0 0 var(--e8);
    padding: 0;
    list-style: none;
}

.compra {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e4);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raioCard);
}

.compraArquivo {
    overflow: hidden;
    font-size: var(--texto13);
    color: var(--textoFraco);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compra .botaoBaixar {
    flex: none;
    min-height: 44px;
}

.pendentes {
    margin-bottom: var(--e5);
}

.pendentes .baixarLista {
    padding: 0 var(--e5) var(--e3);
}

/* ---------- Doações ---------- */

.doacaoBalcao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: var(--e6);
    align-items: start;
}

.doacaoForm .campo {
    margin-bottom: var(--e3);
}

.doacaoForm .marcar {
    margin: 0 0 var(--e5);
}

.valoresRapidos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-bottom: var(--e3);
}

.valorRapido {
    min-height: 40px;
    padding: 0 var(--e4);
    font: inherit;
    font-size: var(--texto15);
    font-weight: 650;
    color: var(--texto);
    background: var(--fundo);
    border: 1.5px solid var(--linhaForte);
    border-radius: 99px;
    cursor: pointer;
}

.valorRapido:hover,
.valorRapido[aria-pressed="true"] {
    color: var(--tinta);
    background: var(--amarelo);
    border-color: var(--amarelo);
}

.doacaoGrade {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--e5);
    align-items: start;
    margin: var(--e6) 0 var(--e8);
}

.quadroLoja {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raioCard);
}

.quadroLojaTopo {
    padding: var(--e5) var(--e5) var(--e3);
}

.quadroLojaTitulo {
    margin: 0;
    font-size: var(--texto20);
    font-weight: 720;
}

.quadroLojaNota {
    margin: var(--e1) 0 0;
    font-size: var(--texto15);
    color: var(--textoSuave);
}

.quadroLojaNota strong {
    color: var(--amarelo);
}

.quadroLojaRodape {
    margin: 0;
    padding: var(--e3) var(--e5) var(--e5);
    font-size: var(--texto13);
    color: var(--textoFraco);
}

.ranking {
    margin: 0;
    padding: 0 var(--e3);
    list-style: none;
}

.rankingItem {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 52px;
    padding: 0 var(--e3);
    border-radius: 12px;
}

.rankingItem + .rankingItem {
    margin-top: 2px;
}

.rankingPosicao {
    flex: none;
    width: 36px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--textoFraco);
}

.rankingNome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rankingValor {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.rankingSelo {
    padding: 2px 10px;
    font-size: var(--texto13);
    font-weight: 700;
    color: var(--tinta);
    background: var(--amarelo);
    border-radius: 99px;
    white-space: nowrap;
}

/* Os 3 primeiros: ouro, prata e bronze */
.rankingItem.premiado {
    background: var(--superficieAlta);
}

.rankingItem.lugar1 .rankingPosicao {
    color: var(--amarelo);
}

.rankingItem.lugar2 .rankingPosicao {
    color: #d7dbe8;
}

.rankingItem.lugar3 .rankingPosicao {
    color: #e0a06a;
}

.rankingVazio {
    margin: 0;
    padding: var(--e3) var(--e5) var(--e5);
    color: var(--textoSuave);
}

/* ---------- Como baixar ---------- */

.porque {
    display: flex;
    gap: var(--e4);
    align-items: flex-start;
    margin-top: var(--e5);
    padding: var(--e5);
    background: rgba(255, 216, 77, 0.07);
    border: 1px solid rgba(255, 216, 77, 0.3);
    border-radius: var(--raioCard);
}

.porqueIcone {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    color: var(--tinta);
    background: var(--amarelo);
    border-radius: 14px;
}

.porqueIcone svg {
    width: 24px;
    height: 24px;
}

.porqueTitulo {
    margin: 0 0 var(--e1);
    font-size: var(--texto16);
    font-weight: 720;
}

.porqueTexto {
    margin: 0;
    max-width: 52rem;
    color: var(--textoSuave);
}

.passos {
    display: grid;
    gap: var(--e4);
    margin: var(--e6) 0 0;
    padding: 0;
    list-style: none;
}

.passo {
    display: flex;
    gap: var(--e5);
    padding: var(--e5);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raioCard);
}

.passoNumero {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    font-size: var(--texto20);
    font-weight: 800;
    color: #fff;
    background: var(--cobalto);
    border-radius: 50%;
}

.passoCorpo {
    flex: 1;
    min-width: 0;
}

.passoTitulo {
    margin: 8px 0 var(--e2);
    font-size: var(--texto20);
    font-weight: 720;
    line-height: 1.25;
}

.passoTexto {
    max-width: 46rem;
    margin: 0 0 var(--e3);
    color: var(--textoSuave);
    line-height: 1.65;
}

.passoTexto strong {
    color: var(--texto);
}

/* Nome do botão que a pessoa tem que clicar */
.nomeBotao {
    display: inline-block;
    padding: 0 8px;
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1.6;
    color: var(--texto);
    white-space: nowrap;
    background: var(--superficieAlta);
    border: 1px solid var(--linhaForte);
    border-radius: 7px;
}

.nomeBotao.verde {
    color: var(--tinta);
    background: var(--sucesso);
    border-color: var(--sucesso);
}

/* Abas dos navegadores */
.abas {
    margin-top: var(--e4);
}

.abasLista {
    display: inline-flex;
    padding: 4px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: 12px;
}

.aba {
    min-height: 36px;
    padding: 0 var(--e4);
    font: inherit;
    font-size: var(--texto15);
    font-weight: 650;
    color: var(--textoSuave);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.aba:hover {
    color: var(--texto);
}

.aba[aria-selected="true"] {
    color: var(--tinta);
    background: var(--amarelo);
}

.abaPainel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: var(--e5);
    align-items: center;
    margin-top: var(--e4);
}

.miniPassos {
    margin: 0;
    padding-left: 1.2em;
    color: var(--textoSuave);
    line-height: 1.75;
}

/* Desenho simplificado do aviso de download */
.janela {
    padding: var(--e4);
    background: #202124;
    border: 1px solid #3c4043;
    border-radius: 12px;
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.8);
}

.janelaLinha {
    display: grid;
    gap: 2px;
    margin-bottom: var(--e3);
}

.janelaArquivo {
    font-size: var(--texto15);
    font-weight: 650;
    color: #e8eaed;
}

.janelaAlerta {
    font-size: var(--texto13);
    color: #f28b82;
}

.janelaBotoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--e2);
}

.janelaBotao {
    padding: 4px 12px;
    font-size: var(--texto13);
    font-weight: 600;
    color: #e8eaed;
    border: 1px solid #5f6368;
    border-radius: 8px;
}

/* Desenho simplificado da tela azul do Windows */
.telaAzul {
    max-width: 420px;
    margin: var(--e2) 0 var(--e4);
    padding: var(--e5);
    color: #fff;
    background: #0a5aa8;
    border-radius: 6px;
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.8);
}

.telaAzulTitulo {
    margin: 0 0 var(--e2);
    font-size: var(--texto20);
    font-weight: 600;
    line-height: 1.25;
}

.telaAzulTexto {
    margin: 0 0 var(--e2);
    font-size: var(--texto13);
    opacity: 0.85;
}

.telaAzulLink {
    display: inline-block;
    font-size: var(--texto13);
    text-decoration: underline;
}

.telaAzulBotoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--e2);
    margin-top: var(--e5);
}

.telaAzulBotao {
    padding: 6px 14px;
    font-size: var(--texto13);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
}

/* O que a pessoa tem que clicar pisca em amarelo */
.janela .destaque,
.telaAzul .destaque {
    position: relative;
    outline: 3px solid var(--amarelo);
    outline-offset: 3px;
    border-radius: 6px;
    animation: chamar 1.6s ease-in-out infinite;
}

@keyframes chamar {
    50% {
        outline-color: rgba(255, 216, 77, 0.25);
    }
}

/* Dúvidas */
.duvidas {
    margin: var(--e7) 0 var(--e8);
}

.duvidasTitulo {
    margin: 0 0 var(--e4);
    font-size: var(--texto32);
    font-weight: 780;
    font-stretch: 82%;
    letter-spacing: -0.02em;
}

.duvida {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 14px;
}

.duvida + .duvida {
    margin-top: var(--e2);
}

.duvida summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    min-height: 56px;
    padding: 0 var(--e5);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.duvida summary::-webkit-details-marker {
    display: none;
}

.duvida summary::after {
    content: "+";
    flex: none;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--amarelo);
    transition: transform var(--rapido) ease;
}

.duvida[open] summary::after {
    transform: rotate(45deg);
}

.duvida p {
    margin: 0;
    padding: 0 var(--e5) var(--e5);
    color: var(--textoSuave);
}

/* ---------- Tamanhos ---------- */

@media (max-width: 1024px) {
    .grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .produto {
        grid-template-columns: 1fr;
        gap: var(--e5);
    }

    .produtoInfo {
        position: static;
    }

    .carrinho,
    .doacaoBalcao,
    .doacaoGrade {
        grid-template-columns: 1fr;
    }

    .resumo {
        position: static;
    }

    .pix {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--e5);
    }

    .pixInfo {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .faixa {
        margin-top: var(--e4);
        padding-top: 120px;
    }

    .faixaTurma {
        right: var(--e3);
        width: 176px;
        height: 128px;
    }

    .faixaTurma .turma {
        --escala: 0.38;
    }

    .balcao {
        padding: var(--e5) var(--e4);
        border-radius: 20px;
    }

    .balcaoTitulo {
        font-size: 1.625rem;
    }

    .busca .botao {
        padding: 0 var(--e4);
    }

    .grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--e3);
        margin-top: var(--e5);
    }

    .cartaoTitulo {
        padding: var(--e2) var(--e3) var(--e3);
        font-size: var(--texto15);
    }

    .cartao .favoritoPosicao {
        top: var(--e2);
        right: var(--e2);
    }

    .botaoFavorito {
        width: 38px;
        height: 38px;
    }

    .cartaoPrevia {
        left: var(--e2);
        bottom: var(--e2);
    }

    .produtoTitulo {
        font-size: var(--texto32);
    }

    .cartaoRodape {
        gap: var(--e2);
        padding: var(--e1) var(--e3) var(--e3);
    }

    .cartaoPreco {
        font-size: var(--texto16);
    }

    .acoesProduto .botao {
        min-height: 40px;
        padding: 0 var(--e2);
    }

    .botaoCarrinhoProduto {
        width: 40px !important;
    }

    .paginaTopo {
        margin: var(--e6) 0 var(--e5);
    }

    .paginaTitulo {
        font-size: var(--texto32);
    }

    .pix {
        padding: var(--e5) var(--e4);
    }

    .pixQr img {
        width: 210px;
        height: 210px;
    }

    .copiaCola {
        flex-direction: column;
    }

    .compra {
        flex-wrap: wrap;
    }

    .compra .botaoBaixar {
        width: 100%;
    }

    .rankingSelo {
        padding: 2px 8px;
        font-size: 11px;
    }

    .porque {
        padding: var(--e4);
    }

    .passo {
        flex-direction: column;
        gap: var(--e3);
        padding: var(--e4);
    }

    .passoTitulo {
        margin-top: 0;
    }

    .abaPainel {
        grid-template-columns: 1fr;
    }

    .nomeBotao {
        white-space: normal;
    }

    .duvidasTitulo {
        font-size: 1.625rem;
    }

    .duvida summary {
        padding: var(--e3) var(--e4);
    }

    .duvida p {
        padding: 0 var(--e4) var(--e4);
    }
}