/* ---------- Páginas de produto ---------- */
.pagina-produto {
    background-color: #f5f0e8;
    color: #454B32;
}

/* Topo */
.topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 5%;
    background-color: #70805D;
}

.topo .marca {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: #ffffff;
    text-decoration: none;
}

.topo .voltar {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.topo .voltar:hover {
    text-decoration: underline;
}

.conteudo-produto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 5% 60px;
}

/* Caminho (breadcrumb) */
.caminho {
    font-size: 0.85rem;
    color: #7a7f68;
    margin-bottom: 20px;
}

.caminho a {
    color: #70805D;
    text-decoration: none;
}

.caminho span {
    margin: 0 4px;
}

/* Produto principal */
.produto-principal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
}

.foto-principal {
    position: relative;
}

.foto-principal img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 16px;
}

.selo-artesanal {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #70805D;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 30px;
}

.info-produto {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-produto .categoria {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #70805D;
}

.info-produto h1 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    color: #4a2c2a;
}

.info-produto .resumo {
    line-height: 1.7;
}

.preco-grande {
    font-size: 2rem;
    font-weight: 600;
    color: #70805D;
}

.pagamento {
    font-size: 0.85rem;
    color: #7a7f68;
}

.destaques {
    list-style: none;
    display: grid;
    gap: 8px;
}

.destaques i {
    color: #70805D;
    margin-right: 6px;
}

.botao-comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background-color: #25D366;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 40px;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s, background-color 0.2s;
}

.botao-comprar i {
    font-size: 1.5rem;
}

.botao-comprar:hover {
    background-color: #1ebe5a;
    transform: translateY(-2px);
}

.garantias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.garantias div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 12px 6px;
    background: #f5f0e8;
    border-radius: 12px;
}

.garantias i {
    font-size: 1.3rem;
    color: #70805D;
}

/* Blocos de conteúdo */
.bloco {
    margin-top: 50px;
}

.bloco h2,
.chamada-final h2 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: 1px;
    color: #3F482D;
    margin-bottom: 20px;
}

.bloco-texto p {
    line-height: 1.9;
    margin-bottom: 16px;
    max-width: 800px;
}

/* Variações */
.lista-variacoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}

.variacao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.variacao img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
}

.variacao h3 {
    font-size: 1rem;
    color: #4a2c2a;
}

.variacao p {
    font-size: 0.85rem;
    line-height: 1.5;
    flex: 1;
}

.link-variacao {
    text-align: center;
    padding: 8px;
    border: 2px solid #25D366;
    border-radius: 30px;
    color: #1a9e4b;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.link-variacao:hover {
    background-color: #25D366;
    color: #ffffff;
}

/* Benefícios */
.lista-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.beneficio {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
}

.beneficio i {
    font-size: 2rem;
    color: #70805D;
    margin-bottom: 12px;
}

.beneficio h3 {
    font-size: 1rem;
    margin-bottom: 6px;
    color: #3F482D;
}

.beneficio p {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Como usar e especificações */
.duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.passos {
    counter-reset: passo;
    list-style: none;
    display: grid;
    gap: 14px;
}

.passos li {
    counter-increment: passo;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1.5;
}

.passos li::before {
    content: counter(passo);
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #70805D;
    color: #ffffff;
    font-weight: 600;
    border-radius: 50%;
}

.especificacoes {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.especificacoes th,
.especificacoes td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #E6E7DE;
    font-size: 0.9rem;
}

.especificacoes th {
    width: 38%;
    color: #70805D;
}

.especificacoes tr:last-child th,
.especificacoes tr:last-child td {
    border-bottom: none;
}

/* Perguntas frequentes */
.faq {
    display: grid;
    gap: 12px;
}

.faq details {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 20px;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: #3F482D;
}

.faq details p {
    margin-top: 10px;
    line-height: 1.7;
}

/* Chamada final */
.chamada-final {
    margin-top: 50px;
    padding: 40px 24px;
    background: #70805D;
    border-radius: 24px;
    text-align: center;
    color: #ffffff;
}

.chamada-final h2 {
    color: #ffffff;
    margin-bottom: 10px;
}

.chamada-final p {
    margin-bottom: 24px;
}

.chamada-final .botao-comprar {
    display: inline-flex;
}

/* Outros produtos */
.lista-outros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.outro {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: #4a2c2a;
    transition: transform 0.2s;
}

.outro:hover {
    transform: translateY(-3px);
}

.outro img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

.outro h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    margin-top: 8px;
}

.outro .preco {
    font-weight: 600;
    color: #70805D;
}

/* Celular */
@media (max-width: 760px) {
    .produto-principal,
    .duas-colunas {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .produto-principal {
        padding: 16px;
    }

    .lista-variacoes {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lista-outros {
        grid-template-columns: 1fr;
    }

    .lista-beneficios {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .beneficio {
        padding: 18px 12px;
    }

    .topo .voltar {
        font-size: 0.8rem;
    }
}