.pagina-presentes {
    min-height: 100vh;
    padding: 150px 0 100px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(173, 148, 114, 0.16),
            transparent 32%
        ),
        var(--cor-fundo-secundaria);
}


.cabecalho-presentes {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}


.cabecalho-presentes h1 {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-titulo);
    font-size: clamp(48px, 7vw, 76px);
    font-weight: 500;
    line-height: 1;
}


.cabecalho-presentes > p:last-child {
    color: var(--cor-texto-suave);
    font-size: 15px;
    line-height: 1.9;
}


.grade-presentes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}


.cartao-presente {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    background: #ffffff;
    box-shadow: var(--sombra-suave);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.cartao-presente:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(42, 48, 43, 0.12);
}


.cartao-presente-destaque {
    border-color: rgba(173, 148, 114, 0.65);
}


.selo-destaque {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 7px 12px;
    background: var(--cor-dourada);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.imagem-presente {
    display: flex;
    height: 255px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #f3efe8;
}


.imagem-presente img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}


.cartao-presente:hover .imagem-presente img {
    transform: scale(1.04);
}


.icone-presente {
    font-size: 75px;
}


.conteudo-presente {
    padding: 27px;
}


.conteudo-presente h2 {
    margin-bottom: 12px;
    font-family: var(--fonte-titulo);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}


.conteudo-presente h2 a {
    color: var(--cor-principal-escura);
    text-decoration: none;
}


.conteudo-presente > p {
    min-height: 63px;
    color: var(--cor-texto-suave);
    font-size: 13px;
    line-height: 1.65;
}


.progresso-presente {
    margin-top: 22px;
}


.barra-progresso {
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: #ece7df;
}


.barra-progresso span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cor-dourada);
}


.progresso-presente small {
    display: block;
    margin-top: 8px;
    color: var(--cor-texto-suave);
    font-size: 10px;
    letter-spacing: 0.4px;
}


.rodape-presente {
    display: flex;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--cor-borda);
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.rodape-presente strong {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-texto);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.4px;
}


.botao-presente {
    display: inline-flex;
    margin: 0;
    padding: 12px 19px;
    border: 0;
    align-items: center;
    justify-content: center;
    background: var(--cor-principal);
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}


.botao-presente:hover {
    background: var(--cor-principal-escura);
}


.botao-presente:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


.presente-indisponivel {
    color: #955959;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.lista-presentes-vazia {
    grid-column: 1 / -1;
    padding: 75px 30px;
    border: 1px solid var(--cor-borda);
    background: #ffffff;
    text-align: center;
}


.lista-presentes-vazia span {
    display: block;
    margin-bottom: 20px;
    font-size: 58px;
}


.lista-presentes-vazia h1,
.lista-presentes-vazia h2 {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-titulo);
    font-size: 38px;
}


.lista-presentes-vazia p {
    color: var(--cor-texto-suave);
}


.pagina-presente-detalhe,
.pagina-presente-indisponivel {
    min-height: 100vh;
    padding: 150px 0 100px;
    background: var(--cor-fundo-secundaria);
}


.detalhe-presente {
    display: grid;
    max-width: 1050px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    background: #ffffff;
    box-shadow: var(--sombra-suave);
}


.detalhe-imagem {
    display: flex;
    min-height: 600px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #f1ece4;
}


.detalhe-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.detalhe-imagem span {
    font-size: 110px;
}


.detalhe-conteudo {
    padding: 60px;
}


.voltar-presentes {
    display: inline-block;
    margin-bottom: 30px;
    color: var(--cor-texto-suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}


.voltar-presentes:hover {
    color: var(--cor-principal-escura);
}


.detalhe-conteudo h1 {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-titulo);
    font-size: clamp(45px, 5vw, 65px);
    font-weight: 500;
    line-height: 1;
}


.descricao-presente {
    margin-top: 27px;
    color: var(--cor-texto-suave);
    font-size: 14px;
    line-height: 1.85;
}


.valor-presente {
    margin-top: 35px;
    padding: 25px 0;
    border-top: 1px solid var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}


.valor-presente small {
    display: block;
    margin-bottom: 5px;
    color: var(--cor-texto-suave);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.valor-presente strong {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-texto);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.8px;
}


.progresso-detalhe {
    margin-top: 30px;
}


.aviso-pagamento {
    margin-top: 35px;
    padding: 18px;
    border: 1px solid #d8cbb9;
    background: #faf7f1;
}


.aviso-pagamento strong {
    color: var(--cor-principal-escura);
    font-size: 13px;
}


.aviso-pagamento p {
    margin-top: 6px;
    color: var(--cor-texto-suave);
    font-size: 12px;
    line-height: 1.6;
}


.botao-pagamento {
    width: 100%;
    margin-top: 22px;
}


.presente-esgotado {
    margin-top: 35px;
    padding: 18px;
    border: 1px solid #e3c6c3;
    background: #faf0ef;
    color: #844744;
    font-size: 13px;
}


/* CHECKOUT */


.pagina-checkout {
    min-height: 100vh;
    padding: 135px 0 90px;
    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(173, 148, 114, 0.13),
            transparent 28%
        ),
        var(--cor-fundo-secundaria);
}


.checkout-container {
    display: grid;
    max-width: 1180px;
    min-height: 720px;
    margin: 0 auto;
    grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.18fr);
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(38, 43, 39, 0.12);
}


.checkout-resumo {
    padding: 42px;
    border-right: 1px solid var(--cor-borda);
    background: #f4efe7;
}


.checkout-imagem {
    display: flex;
    width: 100%;
    height: 290px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #e9e2d8;
}


.checkout-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.checkout-imagem span {
    font-size: 90px;
}


.checkout-resumo-conteudo {
    padding-top: 32px;
}


.checkout-resumo-conteudo h1 {
    margin-top: 8px;
    color: var(--cor-principal-escura);
    font-family: var(--fonte-titulo);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.05;
}


.checkout-descricao {
    margin-top: 17px;
    color: var(--cor-texto-suave);
    font-size: 13px;
    line-height: 1.75;
}


.checkout-valor {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(42, 48, 43, 0.15);
}


.checkout-valor small {
    display: block;
    margin-bottom: 5px;
    color: var(--cor-texto-suave);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.checkout-valor strong {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-texto);
    font-size: 38px;
    font-weight: 700;
}


.checkout-seguranca {
    display: flex;
    margin-top: 30px;
    padding: 17px;
    border: 1px solid rgba(173, 148, 114, 0.35);
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.45);
}


.checkout-seguranca span {
    font-size: 16px;
}


.checkout-seguranca p {
    margin: 0;
    color: var(--cor-texto-suave);
    font-size: 10px;
    line-height: 1.65;
}


.checkout-principal {
    padding: 52px 58px;
}


.checkout-cabecalho {
    margin-bottom: 35px;
}


.checkout-cabecalho h2 {
    margin-top: 5px;
    color: var(--cor-principal-escura);
    font-family: var(--fonte-titulo);
    font-size: 43px;
    font-weight: 500;
    line-height: 1.05;
}


.checkout-cabecalho > p:last-child {
    margin-top: 10px;
    color: var(--cor-texto-suave);
    font-size: 13px;
    line-height: 1.7;
}


.checkout-etapas-indicador {
    display: flex;
    margin-bottom: 42px;
    align-items: flex-start;
}


.indicador-etapa {
    display: flex;
    min-width: 75px;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}


.indicador-etapa span {
    display: flex;
    width: 32px;
    height: 32px;
    border: 1px solid #d8d0c5;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--cor-texto-suave);
    font-size: 11px;
    font-weight: 700;
    transition: all 0.25s ease;
}


.indicador-etapa small {
    color: #9a938b;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}


.indicador-etapa.ativo span,
.indicador-etapa.concluido span {
    border-color: var(--cor-principal);
    background: var(--cor-principal);
    color: #ffffff;
}


.indicador-etapa.ativo small,
.indicador-etapa.concluido small {
    color: var(--cor-principal-escura);
}


.linha-etapa {
    height: 1px;
    margin-top: 16px;
    flex: 1;
    background: #ded8d0;
}


.checkout-etapa {
    display: none;
}


.checkout-etapa.ativa {
    display: block;
    animation: entradaEtapa 0.28s ease;
}


@keyframes entradaEtapa {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.titulo-etapa {
    margin-bottom: 30px;
}


.titulo-etapa > span {
    display: block;
    margin-bottom: 5px;
    color: var(--cor-dourada);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.titulo-etapa h3 {
    color: var(--cor-principal-escura);
    font-family: var(--fonte-titulo);
    font-size: 35px;
    font-weight: 500;
}


.titulo-etapa p {
    margin-top: 7px;
    color: var(--cor-texto-suave);
    font-size: 12px;
    line-height: 1.6;
}


.linha-formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


.campo-formulario {
    margin-bottom: 21px;
}


.campo-formulario label {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    justify-content: space-between;
    color: var(--cor-principal-escura);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.campo-formulario label span {
    color: var(--cor-texto-suave);
    font-size: 8px;
    font-weight: 600;
}


.form-control,
.form-select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #d9d4cc;
    border-radius: 0;
    outline: none;
    background: #ffffff;
    color: var(--cor-principal-escura);
    font-family: var(--fonte-texto);
    font-size: 13px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


textarea.form-control {
    min-height: 115px;
    resize: vertical;
}


.form-control:focus,
.form-select:focus {
    border-color: var(--cor-dourada);
    box-shadow: 0 0 0 3px rgba(173, 148, 114, 0.12);
}


.form-control.campo-invalido {
    border-color: #af5d57;
    box-shadow: 0 0 0 3px rgba(175, 93, 87, 0.09);
}


.mensagem-campo {
    display: block;
    margin-top: 6px;
    color: #969088;
    font-size: 9px;
    line-height: 1.5;
}


.erro-campo {
    display: block;
    margin-top: 6px;
    color: #a24e48;
    font-size: 10px;
}


.erros-formulario {
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #e3c6c3;
    background: #faf0ef;
    color: #844744;
    font-size: 12px;
}


.opcoes-pagamento {
    display: grid;
    gap: 12px;
}


.opcoes-pagamento.grupo-invalido {
    padding: 8px;
    border: 1px solid #af5d57;
}


.opcao-pagamento {
    position: relative;
    display: grid !important;
    min-height: 80px;
    margin: 0 !important;
    padding: 17px 52px 17px 20px;
    border: 1px solid #ded8d0;
    align-items: center !important;
    grid-template-columns: 1fr;
    background: #ffffff;
    cursor: pointer;
    text-transform: none !important;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.opcao-pagamento:hover {
    border-color: var(--cor-dourada);
    background: #fcfaf6;
}


.opcao-pagamento input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.opcao-pagamento:has(input:checked) {
    border-color: var(--cor-principal);
    background: #f8f6f1;
}


.opcao-pagamento-conteudo {
    display: block !important;
}


.opcao-pagamento-conteudo strong {
    display: block;
    margin-bottom: 4px;
    color: var(--cor-principal-escura);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}


.opcao-pagamento-conteudo small {
    display: block;
    color: var(--cor-texto-suave);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
}


.marcador-pagamento {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block !important;
    width: 19px;
    height: 19px;
    border: 1px solid #c8c0b6;
    border-radius: 50%;
    transform: translateY(-50%);
}


.opcao-pagamento input:checked
    ~ .marcador-pagamento {
    border: 5px solid var(--cor-principal);
}


.campo-parcelas {
    display: none;
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--cor-borda);
    background: #faf8f4;
}


.campo-parcelas.visivel {
    display: block;
}


.acoes-etapa {
    display: flex;
    margin-top: 32px;
    padding-top: 25px;
    border-top: 1px solid var(--cor-borda);
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


.acoes-etapa .botao-presente {
    min-width: 190px;
    min-height: 47px;
}


.botao-secundario-checkout {
    display: inline-flex;
    min-height: 45px;
    padding: 11px 5px;
    border: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--cor-texto-suave);
    font-family: var(--fonte-texto);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}


.botao-secundario-checkout:hover {
    color: var(--cor-principal-escura);
}


.resumo-revisao {
    display: grid;
    gap: 17px;
}


.revisao-bloco {
    padding: 22px;
    border: 1px solid var(--cor-borda);
    background: #ffffff;
}


.revisao-bloco header {
    display: flex;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--cor-borda);
    align-items: center;
    justify-content: space-between;
}


.revisao-bloco h4 {
    color: var(--cor-principal-escura);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}


.revisao-bloco header button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cor-dourada);
    font-family: var(--fonte-texto);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
}


.revisao-bloco dl {
    margin: 0;
}


.revisao-bloco dl > div {
    display: grid;
    padding: 7px 0;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 14px;
}


.revisao-bloco dt {
    color: var(--cor-texto-suave);
    font-size: 10px;
}


.revisao-bloco dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--cor-principal-escura);
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}


.aviso-checkout-integracao {
    margin-top: 22px;
    padding: 17px 19px;
    border: 1px solid #d8cbb9;
    background: #faf7f1;
}


.aviso-checkout-integracao strong {
    display: block;
    color: var(--cor-principal-escura);
    font-size: 11px;
}


.aviso-checkout-integracao p {
    margin-top: 5px;
    color: var(--cor-texto-suave);
    font-size: 10px;
    line-height: 1.6;
}


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

    .detalhe-presente {
        grid-template-columns: 1fr;
    }

    .detalhe-imagem {
        min-height: 450px;
    }

    .checkout-container {
        max-width: 760px;
        grid-template-columns: 1fr;
    }

    .checkout-resumo {
        border-right: 0;
        border-bottom: 1px solid var(--cor-borda);
    }

    .checkout-imagem {
        height: 350px;
    }
}


@media (max-width: 640px) {
    .pagina-presentes,
    .pagina-presente-detalhe,
    .pagina-presente-indisponivel,
    .pagina-checkout {
        padding: 105px 0 60px;
    }

    .grade-presentes {
        grid-template-columns: 1fr;
    }

    .imagem-presente {
        height: 230px;
    }

    .conteudo-presente > p {
        min-height: auto;
    }

    .rodape-presente {
        align-items: flex-start;
        flex-direction: column;
    }

    .botao-presente {
        width: 100%;
        text-align: center;
    }

    .detalhe-imagem {
        min-height: 320px;
    }

    .detalhe-conteudo {
        padding: 40px 23px;
    }

    .checkout-container {
        width: 100%;
    }

    .checkout-resumo {
        padding: 25px 20px 30px;
    }

    .checkout-imagem {
        height: 230px;
    }

    .checkout-principal {
        padding: 35px 20px;
    }

    .checkout-cabecalho h2 {
        font-size: 36px;
    }

    .checkout-etapas-indicador {
        margin-bottom: 35px;
    }

    .indicador-etapa {
        min-width: 58px;
    }

    .indicador-etapa small {
        font-size: 7px;
    }

    .linha-formulario {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .acoes-etapa {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .acoes-etapa .botao-presente,
    .botao-secundario-checkout {
        width: 100%;
    }

    .revisao-bloco dl > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .revisao-bloco dd {
        text-align: left;
    }
}