/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
body { background: #eee7e0; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.pagina {
  --marrom: #783719;
  --terra: #a85225;
  --tinta: #2d1d16;
  --degrade: linear-gradient(100deg, #552514, #7c3719, #bd6d39);
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin-inline: auto;
  color: var(--tinta);
  background: #fffdfa;
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.45;
  box-shadow: 0 0 42px rgba(17, 24, 39, .1);
}
.pagina a:focus-visible, .pagina button:focus-visible, .pagina summary:focus-visible { outline: 3px solid #f8a40b; outline-offset: 3px; }

.miolo { width: calc(100% - 32px); margin-inline: auto; }

/* ===== Faixa do topo ===== */
.faixa {
  padding: 8px 12px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #552514, #783719, #a85225);
}

/* ===== Títulos e botões comuns ===== */
.titulo {
  margin: 0 auto 14px;
  text-align: center;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.titulo em { color: var(--marrom); font-style: normal; }
.titulo-grande { font-size: 28px; }
.titulo-maior { font-size: 29px; max-width: 340px; }
.subtitulo { margin: -8px 0 22px; text-align: center; color: #565e59; font-size: 13px; }

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-width: min(100%, 326px);
  max-width: 100%;
  min-height: 58px;
  margin: 10px auto 0;
  padding: 14px 18px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  background: var(--degrade);
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(99, 48, 24, .32);
  animation: pulsar 2.3s ease-in-out infinite;
}
.botao:hover { filter: brightness(.95); }
@keyframes pulsar {
  50% { transform: scale(1.025); box-shadow: 0 10px 30px rgba(151, 70, 15, .5); }
}
@media (prefers-reduced-motion: reduce) { .botao, .botao-comprar { animation: none; } }

/* ===== Topo ===== */
.topo { padding-top: 22px; padding-bottom: 18px; text-align: center; }
.topo h1 {
  max-width: 650px;
  margin: 0 auto 10px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: transparent;
  background: linear-gradient(95deg, #542413, #7c3719, #bd6d39);
  -webkit-background-clip: text;
  background-clip: text;
}
.topo h2 { max-width: 660px; margin: 0 auto 8px; color: #4b2b1c; font-size: 18px; font-weight: 800; line-height: 1.25; }
.topo-arte { margin-top: 12px; overflow: hidden; background: #ead9ca; border-radius: 12px; }
.topo-arte img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.topo-texto { max-width: 630px; margin: 12px auto 10px; color: #5e4438; font-size: 14px; }
.nota { margin: 8px auto 0; color: #795b4a; font-size: 11px; }

/* ===== Vantagens ===== */
.vantagens { padding-block: 22px 24px; }
.vantagens-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.vantagens-grade li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 98px;
  padding: 11px 8px;
  text-align: center;
  background: #fff;
  border: 1px solid #efe2d7;
  border-radius: 13px;
  box-shadow: 0 4px 13px rgba(0, 0, 0, .05);
}
.vantagens-grade span { font-size: 22px; }
.vantagens-grade strong { font-size: 12px; font-weight: 800; line-height: 1.25; }

/* ===== Sabores ===== */
.sabores { padding: 24px 12px 28px; background: #f9f9f9; border-block: 1px solid #f0f0f0; }
.sabores-intro { width: calc(100% - 24px); margin: 0 auto 15px; text-align: center; }
.sabores-intro .titulo { margin-bottom: 0; }
.sabores-intro .titulo::after { content: ""; display: block; width: 80px; height: 4px; margin: 12px auto 0; background: var(--terra); border-radius: 999px; }
.sabores-intro p { margin: 10px auto 0; color: #565e59; font-size: 12px; }
.sabores-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 820px; margin: 0 auto; }
.sabor { overflow: hidden; background: #fff; border: 1px solid #eadbd0; border-radius: 13px; box-shadow: 0 8px 20px rgba(90, 42, 20, .07); }
.sabor img { width: 100%; height: auto; aspect-ratio: 1.1; object-fit: cover; }
.sabor div { padding: 12px 10px 14px; text-align: center; }
.sabor h3 { color: #66301a; font-size: 13px; font-weight: 900; }
.sabor p { margin-top: 5px; color: #806c62; font-size: 11px; line-height: 1.45; }

/* ===== Depoimentos ===== */
.conversas { padding-block: 20px 24px; }
.conversas .titulo { margin-inline: auto; }
.conversas-carrossel { --ponto: #d5dbd6; --ponto-ativo: #783719; }
.setas { display: flex; justify-content: flex-end; gap: 8px; margin: -5px 0 10px; }
.setas button {
  width: 34px; height: 34px;
  color: #263c2f; font-size: 23px; line-height: 1;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dce3dc;
  border-radius: 50%;
}
.conversas-trilho { gap: 12px; width: 100%; padding: 4px 0 12px; align-items: flex-start; overscroll-behavior-inline: contain; }
.conversas-trilho figure {
  flex: 0 0 min(100%, 350px);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #eee9e3;
  border: 1px solid #e4e5e1;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
}
.conversas-trilho img { width: 100%; height: auto; aspect-ratio: 941 / 1672; object-fit: contain; }
.arraste { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; color: rgba(0, 168, 68, .7); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.arraste span { font-size: 19px; line-height: 1; }
.conversas-pontos { gap: 8px; margin: 13px auto 0; }
.conversas-pontos button { width: 9px; height: 9px; }
.conversas-pontos button[aria-current="true"] { width: 9px; border-radius: 50%; }

/* ===== Para quem é ===== */
.para-quem { padding-block: 26px; background: #faf2ea; }
.para-quem-lista { padding: 17px; background: #fff; border-radius: 15px; }
.para-quem-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #edf0ed; }
.para-quem-lista li:last-child { border-bottom: 0; }
.para-quem-lista span { display: grid; flex: 0 0 20px; height: 20px; place-items: center; color: var(--marrom); background: #f4e3d4; border-radius: 50%; }

/* ===== Bônus ===== */
.bonus { padding-block: 27px; }
.bonus .titulo { font-size: 23px; }
.bonus-lista { display: grid; gap: 11px; }
.bonus-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 11px;
  min-height: 122px;
  padding: 12px;
  background: #fff;
  border: 1px solid #ecebe7;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .07);
}
.bonus-item img { width: 76px; height: 94px; object-fit: contain; }
.bonus-etiqueta { position: absolute; top: -7px; left: 0; padding: 2px 8px; color: #fff; font-size: 9px; font-weight: 800; background: var(--terra); border-radius: 4px; }
.bonus-item h3 { margin-bottom: 4px; font-size: 15px; font-weight: 900; line-height: 1.15; }
.bonus-item p { margin-bottom: 6px; color: #59635b; font-size: 11px; }
.bonus-valor { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 8px; font-size: 11px; font-weight: 800; }
.bonus-valor del { color: #9ca3af; }
.bonus-valor strong { padding: 4px 10px; color: #00a844; font-size: 10px; letter-spacing: .02em; background: rgba(0, 200, 83, .12); border-radius: 9999px; }

/* ===== Ofertas ===== */
.ofertas { padding-block: 29px 31px; background: linear-gradient(#fffaf5, #f9eee4); border-block: 1px solid rgba(168, 82, 37, .2); }
.ofertas .subtitulo { margin-top: -8px; }
.planos { display: grid; gap: 15px; max-width: 500px; margin: auto; }
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 23px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}
.plano-destaque { margin-top: 14px; border: 4px solid var(--marrom); box-shadow: 0 16px 35px rgba(0, 0, 0, .11); }
.plano-recomendado {
  position: absolute; top: -17px; left: 50%;
  padding: 7px 20px;
  color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .1em; white-space: nowrap;
  background: linear-gradient(90deg, #552514, #a85225);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(99, 48, 24, .27);
  transform: translateX(-50%);
}
.plano-selo { align-self: center; margin-bottom: 6px; padding: 5px 16px; color: #59616b; font-size: 11px; font-weight: 900; letter-spacing: .05em; background: #f3f4f6; border-radius: 999px; }
.plano-destaque .plano-selo { color: #713116; background: #f5e5d8; }
.plano h3 { margin-bottom: 18px; font-size: 21px; font-weight: 900; line-height: 1.18; }
.plano ul { display: grid; gap: 8px; margin-bottom: 22px; text-align: left; }
.plano li { display: flex; align-items: flex-start; gap: 8px; color: #444; font-size: 12px; font-weight: 650; line-height: 1.35; }
.plano-item span { color: var(--marrom); font-weight: 900; }
.plano li.plano-brinde { gap: 7px; padding: 8px; color: #6c3b16; font-size: 11px; background: #fff9f2; border: 1px solid rgba(255, 107, 0, .11); border-radius: 10px; }
.plano-brinde span { flex: none; }
.plano-rodape { margin-top: auto; }
.plano-pagamento { margin-bottom: 3px; color: #6d554a; font-size: 11px; font-weight: 700; }
.plano-preco { margin-bottom: 8px; color: var(--marrom); font-size: 44px; font-weight: 950; line-height: 1.1; }
.botao-comprar {
  display: block;
  width: 100%;
  min-height: 57px;
  margin-bottom: 8px;
  padding: 17px;
  color: #fff;
  text-align: center;
  font-size: 14px; font-weight: 900; letter-spacing: .05em;
  background: var(--degrade);
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(99, 48, 24, .32);
  animation: pulsar 2.3s ease-in-out infinite;
}
.plano-garantias { display: flex; justify-content: center; gap: 15px; color: #9ca3af; font-size: 9px; font-weight: 800; }

/* ===== Chef ===== */
.chef { padding: 27px 0 29px; text-align: center; background: #fff; }
.chef .titulo { margin-bottom: 15px; }
.chef-perfil { width: min(100%, 470px); height: auto; margin: 0 auto 19px; object-fit: contain; border: 1px solid #d7bca7; border-radius: 16px; box-shadow: 0 12px 28px rgba(98, 54, 31, .14); }
.chef p { max-width: 365px; margin: 0 auto; color: #313131; font-size: 12px; line-height: 1.55; }
.chef p strong { color: #101010; font-weight: 900; }

/* ===== Garantia ===== */
.garantia { padding: 31px 0; color: #5e4438; text-align: center; background: #f1e3d7; }
.garantia h2, .garantia h3 { color: #783719; text-transform: uppercase; font-weight: 900; }
.garantia h2 { font-size: 23px; line-height: 1.2; }
.garantia h3 { font-size: 18px; }
.garantia p { max-width: 600px; margin: 0 auto; font-size: 13px; line-height: 1.55; }
.garantia-selo { width: 130px; height: auto; margin: 0 auto 17px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(42, 22, 15, .13)); }

/* ===== Perguntas frequentes ===== */
.duvidas { padding-block: 27px; text-align: center; }
.duvidas-lista { display: grid; gap: 9px; text-align: left; }
.duvidas details { background: #fff; border: 1px solid #e7ece8; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, .04); }
.duvidas summary { display: flex; justify-content: space-between; gap: 10px; padding: 13px 15px; font-size: 12px; font-weight: 800; color: #000; }
.duvidas summary::after { content: "⌄"; flex: none; transition: transform .2s; }
.duvidas details[open] summary::after { transform: rotate(180deg); }
.duvidas details p { padding: 0 15px 14px; color: #46544a; font-size: 12px; }
.fecho { margin: 25px auto 6px; font-size: 17px; font-weight: 900; }
.fecho-sub { font-size: 12px; }

/* ===== Rodapé ===== */
.rodape { padding: 19px 15px; color: #e9f6eb; font-size: 11px; text-align: center; background: #2b170f; }
.rodape strong { color: var(--terra); }
.rodape p { margin: 6px auto; }

/* ===== Telas estreitas ===== */
@media (max-width: 380px) {
  .miolo { width: calc(100% - 24px); }
  .vantagens-grade li { min-height: 105px; }
}