/* /promocao — a liquidação da caixa de 10 sachês (inc/pagina-promocao.php).
   Celular primeiro, e o celular do TikTok: a COMPRA cabe na primeira tela de
   360 × 640 (preço, validade, sabor, quantidade e o botão), sem rolar. O resto
   (frete, porquê, sachê, depoimentos, perguntas) vem embaixo, para quem precisa
   de mais um motivo. Repaginada em 10/11/2026. */

:root {
    --magenta: #e6007e;
    --magenta-escuro: #b8005f;
    --rosa: #fff1f7;
    --teal: #0f8f8f;
    --tinta: #1f2937;
    --cinza: #5b6472;
    --borda: #e7e3e6;
    --ok: #15803d;
    --ruim: #b42318;
    --aviso-fundo: #fff7e6;
    --aviso-borda: #f6d48b;
    --aviso-tinta: #6b4600;
    --amarelas: #e8a900;
    --roxas: #7b3fa0;
    --vermelhas: #d6213a;
    --raio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.pp {
    margin: 0; background: #fff; color: var(--tinta);
    font: 500 16px/1.5 Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}
.pp img { max-width: 100%; height: auto; display: block; }
.pp a { color: var(--magenta-escuro); }
.pp h1, .pp h2, .pp h3 { line-height: 1.2; margin: 0; }
.pp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- topo */
.pp-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--borda);
}
.pp-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta) !important; font-weight: 800; }
.pp-logo img { width: 28px; height: 28px; border-radius: 7px; }
.pp-ajuda { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--teal) !important; padding: 8px 0; }

/* A faixa do prazo: o último dia de venda do lote, contando. */
.pp-urgencia {
    margin: 0; padding: 7px 12px; background: var(--tinta); color: #fff;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px;
    font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center;
}
.pp-urgencia b { color: #ffd166; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- botões */
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--magenta); color: #fff !important; text-decoration: none;
    font-family: inherit; font-weight: 800; font-size: 16px; line-height: 1.2; text-align: center;
    box-shadow: 0 8px 20px rgba(230, 0, 126, .25); transition: transform .12s, background .12s;
}
.pp-btn:hover { background: var(--magenta-escuro); }
.pp-btn:active { transform: translateY(1px); }
.pp-btn-linha { background: #fff; color: var(--magenta-escuro) !important; border: 2px solid var(--magenta); box-shadow: none; }
.pp-btn-linha:hover { background: var(--rosa); }
/* O botão da compra: "Comprar agora" e, embaixo, o que vai para o pagamento. */
.pp-btn-grande { width: 100%; min-height: 60px; padding: 9px 18px; flex-direction: column; gap: 1px; margin-top: 12px; }
.pp-btn-l1 { font-size: 18px; letter-spacing: .01em; }
.pp-btn-l2 { font-size: 13px; font-weight: 700; opacity: .95; }

/* --------------------------------------------------------- a oferta (compra) */
.pp-oferta {
    padding: 12px 16px 18px; max-width: 560px; margin: 0 auto;
    background: linear-gradient(180deg, var(--rosa) 0, #fff 190px);
}
.pp-vitrine { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; }
.pp-foto { position: relative; }
.pp-foto img { width: 116px; height: 116px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .14)); }
.pp-foto-mix { display: grid; grid-template-columns: repeat(3, 1fr); width: 116px; height: 116px; align-items: center; }
.pp-foto-mix img { width: 72px; height: 72px; margin-left: -18px; }
.pp-foto-mix img:first-child { margin-left: 0; }
.pp-selo {
    position: absolute; top: -2px; right: -6px; background: var(--magenta); color: #fff;
    font-weight: 800; font-size: 14px; padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 10px rgba(230, 0, 126, .3);
}
.pp-oferta h1 { font-size: clamp(25px, 7.4vw, 34px); font-weight: 800; letter-spacing: -.01em; }
.pp-cor { color: var(--magenta); white-space: nowrap; }
.pp-sub { margin: 4px 0 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 0 10px; }
.pp-de { color: var(--cinza); white-space: nowrap; }
.pp-sub b { white-space: nowrap; }
.pp-validade {
    margin: 7px 0 0; padding: 4px 9px; border-radius: 9px; background: var(--aviso-fundo); display: inline-block;
    border: 1px solid var(--aviso-borda); color: var(--aviso-tinta); font-size: 12.5px; line-height: 1.35;
}

.pp-passo { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.pp-passo legend, .pp-legenda {
    display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 7px;
    font-size: 15px; font-weight: 800;
}
.pp-legenda small { font-size: 13px; font-weight: 600; color: var(--cinza); }
.pp-num {
    display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--tinta); color: #fff; font-size: 12px;
}
.pp-nota { margin: 6px 0 0; color: var(--cinza); font-size: 13px; line-height: 1.4; }
.pp-nota:empty { display: none; }

/* Os sabores: três lado a lado, com a cor de cada um embaixo. */
.pp-sabores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-sabor {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 4px 7px; border: 2px solid var(--borda); border-radius: var(--raio); background: #fff;
    cursor: pointer; text-align: center; transition: border-color .12s, box-shadow .12s;
    border-bottom-width: 4px;
}
.pp-sabor[data-sabor="amarelas"] { border-bottom-color: var(--amarelas); }
.pp-sabor[data-sabor="roxas"] { border-bottom-color: var(--roxas); }
.pp-sabor[data-sabor="vermelhas"] { border-bottom-color: var(--vermelhas); }
.pp-sabor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-sabor img { width: 52px; height: 52px; object-fit: contain; }
.pp-sabor-nome { font-weight: 800; font-size: 13px; line-height: 1.2; }
.pp-sabor-tag { font-size: 11.5px; color: var(--cinza); font-weight: 700; }
.pp-sabor-tag.cafeina { color: var(--vermelhas); }
.pp-sabor-restam { font-size: 11px; font-weight: 800; color: var(--magenta-escuro); }
.pp-sabor-aviso { font-size: 11px; font-weight: 800; color: var(--ruim); line-height: 1.2; }
.pp-sabor:has(input:checked), .pp-sabor.escolhido {
    border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(230, 0, 126, .14); background: #fffafd;
}
.pp-sabor:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.pp-sabor:has(input:checked)::after, .pp-sabor.escolhido::after {
    content: "✓"; position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; background: var(--magenta); color: #fff; font-weight: 800; font-size: 12px;
}
.pp-sabor.indisponivel { cursor: not-allowed; opacity: .6; background: #f6f5f6; }
.pp-sabor.indisponivel img { filter: grayscale(1); }

/* "Os 3 sabores": uma linha inteira embaixo dos três. */
.pp-mix {
    flex-direction: row; justify-content: flex-start; gap: 10px; margin-top: 8px; padding: 6px 12px;
    border-bottom-width: 2px; text-align: left;
}
.pp-mix-fotos { display: flex; flex: 0 0 auto; }
.pp-mix .pp-mix-fotos img { width: 34px; height: 34px; margin-left: -10px; }
.pp-mix .pp-mix-fotos img:first-child { margin-left: 0; }
/* "Frutas " e "caixa " só onde há largura: no celular, "Amarelas" numa linha. */
@media (max-width: 519px) { .pp-largo { display: none; } }
.pp-mix-txt { display: grid; font-size: 14px; line-height: 1.25; min-width: 0; }
.pp-mix-txt span { font-size: 12px; color: var(--cinza); font-weight: 700; }
.pp-mix-preco { margin-left: auto; padding-right: 22px; display: grid; justify-items: end; line-height: 1.2; white-space: nowrap; }
.pp-mix-preco b { font-size: 16px; color: var(--magenta-escuro); }
.pp-mix-preco span { font-size: 11.5px; color: var(--cinza); font-weight: 700; }
.pp-mix:has(input:checked)::after, .pp-mix.escolhido::after { top: 50%; transform: translateY(-50%); right: 8px; }

/* Quantidade: três botões com o total de cada um. */
.pp-qtds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-qtd { position: relative; cursor: pointer; }
.pp-qtd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-qtd > span {
    display: grid; justify-items: center; padding: 6px 4px; border: 2px solid var(--borda);
    border-radius: 12px; background: #fff; text-align: center; line-height: 1.25;
}
.pp-qtd b { font-size: 14px; }
.pp-qtd em { font-style: normal; font-weight: 800; font-size: 15px; color: var(--magenta-escuro); }
.pp-qtd small { color: var(--cinza); font-size: 11px; font-weight: 600; }
.pp-qtd input:checked + span { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(230, 0, 126, .14); background: #fffafd; }
.pp-qtd input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.pp-qtd input:disabled + span { opacity: .45; cursor: not-allowed; }
.pp-passo-qtd:disabled .pp-qtds { display: none; }
.pp-passo-qtd:disabled legend { opacity: .55; }

.pp-confianca {
    list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px;
    font-size: 12.5px; color: var(--cinza); font-weight: 600;
}
.pp-confianca li { display: flex; gap: 6px; align-items: baseline; }

/* --------------------------------------------------------------- frete */
.pp-frete { padding: 18px 16px 20px; max-width: 560px; margin: 0 auto; border-top: 8px solid #f6f3f5; }
.pp-cep label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.pp-cep-linha { display: flex; gap: 8px; }
.pp-cep input {
    flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border: 2px solid #d7d2d6; border-radius: 12px;
    font-family: inherit; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .04em; color: var(--tinta);
}
.pp-cep input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 143, 143, .18); }
.pp-cep input[aria-invalid="true"] { border-color: var(--ruim); }
.pp-cep .pp-btn { min-height: 48px; padding: 10px 16px; }
.pp-cotacao { margin-top: 10px; }
.pp-cotacao:empty { display: none; }
.pp-opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-opcoes li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px;
    border: 1px solid var(--borda); border-radius: 12px; background: #fcfbfc; font-size: 15px;
}
.pp-opcoes .gratis { color: var(--ok); font-weight: 800; }
.pp-opcoes .pp-prazo-aviso { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--aviso-tinta); }
.pp-opcoes li.depois { border-color: var(--aviso-borda); background: var(--aviso-fundo); }
.pp-opcoes li.depois .pp-prazo-aviso { color: var(--ruim); }
.pp-erro { color: var(--ruim); font-weight: 700; font-size: 14px; margin: 0; }
.pp-carregando { color: var(--cinza); font-size: 14px; margin: 0; }
.pp-retirada {
    margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: #eefaf9; border: 1px solid #bfe7e3;
    font-size: 14px; line-height: 1.45;
}
.pp-resumo { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 8px; }
.pp-linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
.pp-linha > span:last-child { text-align: right; color: var(--cinza); }
.pp-total { font-size: 18px; border-top: 1px dashed var(--borda); margin-top: 4px; padding-top: 9px; }
.pp-total b { color: var(--magenta-escuro); text-align: right; }

/* ------------------------------------------- o porquê, o sachê, quem usa */
.pp-porque, .pp-beneficios, .pp-depoimentos, .pp-faq, .pp-produto, .pp-final {
    padding: 22px 16px; max-width: 760px; margin: 0 auto;
}
.pp-porque { max-width: none; background: var(--tinta); color: #fff; }
.pp-porque > * { max-width: 728px; margin-left: auto; margin-right: auto; }
.pp-porque h2 { font-size: 21px; margin-bottom: 8px; }
.pp-porque p { margin: 0 auto; color: #f3eef1; font-size: 15px; }
.pp-beneficios h2, .pp-depoimentos h2, .pp-faq h2, .pp-final h2 { font-size: 21px; margin-bottom: 12px; }
.pp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-cards li {
    display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: var(--raio);
    background: var(--rosa); font-size: 13px; color: var(--cinza); line-height: 1.4;
}
.pp-cards b { color: var(--tinta); font-size: 15px; line-height: 1.25; }

.pp-deps { display: grid; gap: 10px; }
.pp-dep { margin: 0; padding: 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; }
.pp-dep blockquote { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pp-dep blockquote p { margin: 0; }
.pp-dep blockquote p::before { content: "“"; color: var(--magenta); font-weight: 800; }
.pp-dep blockquote p::after { content: "”"; color: var(--magenta); font-weight: 800; }
.pp-dep figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pp-dep figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f1eef0; }
.pp-dep figcaption span { display: grid; font-size: 14px; line-height: 1.3; }
.pp-dep figcaption small { color: var(--cinza); font-size: 12.5px; }

.pp-faq { border-top: 1px solid var(--borda); }
.pp-faq details { border-bottom: 1px solid var(--borda); }
.pp-faq summary {
    cursor: pointer; list-style: none; padding: 13px 32px 13px 0; position: relative; font-weight: 700; font-size: 15px;
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-size: 22px; color: var(--magenta); }
.pp-faq details[open] summary::after { content: "−"; }
.pp-faq details p { margin: 0 0 13px; color: var(--cinza); font-size: 15px; }

.pp-produto { padding-top: 6px; }
.pp-produto summary {
    cursor: pointer; list-style: none; padding: 13px 32px 13px 0; position: relative; border-bottom: 1px solid var(--borda);
}
.pp-produto summary::-webkit-details-marker { display: none; }
.pp-produto summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-size: 22px; color: var(--magenta); }
.pp-produto details[open] summary::after { content: "−"; }
.pp-produto summary h2 { font-size: 15px; display: inline; }
.pp-produto details > p { margin: 12px 0; color: var(--cinza); font-size: 14px; }
.pp-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: 12px; }
.pp-tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 300px; }
.pp-tabela th, .pp-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
.pp-tabela thead th { background: var(--rosa); font-size: 13px; }
.pp-tabela tbody th { font-weight: 700; }
.pp-tabela tr:last-child th, .pp-tabela tr:last-child td { border-bottom: 0; }
.pp-rotulo { margin: 14px 0 0; }
.pp-rotulo dt { font-weight: 800; margin-top: 12px; }
.pp-rotulo dd { margin: 2px 0 0; color: var(--cinza); font-size: 14.5px; }

.pp-final { text-align: center; padding-bottom: 30px; }
.pp-final p { margin: 0 0 14px; color: var(--cinza); font-size: 15px; }

.pp-rodape { padding: 22px 16px 30px; background: #faf7f9; color: var(--cinza); font-size: 13px; text-align: center; }
.pp-rodape p { margin: 6px 0; }

/* ------------------------------------------ encerrada, esgotada, indisponível */
.pp-fim { padding: 48px 16px 60px; max-width: 620px; margin: 0 auto; text-align: center; }
.pp-fim h1 { font-size: 28px; margin-bottom: 12px; }
.pp-fim p { color: var(--cinza); }
.pp-fim-contato { font-size: 14px; }

/* ------------------------------------------------ barra fixa no celular */
.pp-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); background: #fff;
    border-top: 1px solid var(--borda); box-shadow: 0 -8px 24px rgba(31, 41, 55, .10);
}
/* Duas linhas: "Frutas Vermelhas · 1 caixa" e "R$ 40,00 + frete". */
.pp-barra-txt { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; min-width: 0; }
.pp-barra-l1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-barra-txt b { font-size: 15px; }
.pp-barra-txt small { color: var(--cinza); font-size: 13px; }
.pp-barra .pp-btn { min-height: 46px; padding: 10px 22px; flex: 0 0 auto; }
/* O fim da página sobe a altura da barra: nada fica escondido embaixo dela. */
body.pp-com-barra { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* -------------------------------------------------------------- telas maiores */
@media (min-width: 400px) {
    .pp-vitrine { grid-template-columns: 128px minmax(0, 1fr); }
    .pp-foto img, .pp-foto-mix { width: 128px; height: 128px; }
    .pp-sabor img { width: 58px; height: 58px; }
}
@media (min-width: 760px) {
    .pp-topo { padding: 12px 28px; }
    .pp-urgencia { font-size: 14px; padding: 9px 16px; }
    .pp-oferta {
        max-width: 980px; padding: 28px 28px 32px;
        display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 480px); gap: 0 44px; justify-content: center;
        background: linear-gradient(180deg, var(--rosa) 0, #fff 320px);
    }
    /* No computador a foto ocupa a coluna da esquerda; o resto, a da direita. */
    .pp-vitrine { display: contents; }
    .pp-foto { grid-column: 1; grid-row: 1 / span 8; align-self: start; position: sticky; top: 24px; max-width: 340px; justify-self: center; width: 100%; }
    .pp-foto img, .pp-foto-mix { width: 100%; height: auto; aspect-ratio: 1; }
    .pp-foto-mix img { width: 62%; height: auto; margin-left: -30%; }
    .pp-mix .pp-mix-fotos img { width: 44px; height: 44px; }
    .pp-selo { top: 8px; right: 8px; font-size: 18px; padding: 6px 12px; }
    .pp-oferta > *:not(.pp-vitrine), .pp-preco { grid-column: 2; }
    .pp-oferta h1 { font-size: 40px; }
    .pp-sub { font-size: 17px; }
    .pp-sabor img { width: 72px; height: 72px; }
    .pp-sabor-nome { font-size: 14px; }
    .pp-frete, .pp-faq, .pp-produto { max-width: 760px; }
    .pp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pp-deps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-barra { display: none !important; }
    body.pp-com-barra { padding-bottom: 0; }
}