/* ===== 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;
  --marrom-escuro: #552514;
  --cobre: #a85225;
  --tinta: #2d1d16;
  width: 100%; max-width: 430px; min-height: 100vh; margin-inline: auto;
  background: #fffdfa; color: var(--tinta);
  font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.45;
  box-shadow: 0 0 42px #1118271a;
}
.miolo { width: calc(100% - 32px); margin-inline: auto; }
@media (max-width: 380px) { .miolo { width: calc(100% - 24px); } }

/* ===== Faixa ===== */
.faixa {
  padding: 8px 12px; text-align: center; color: #fff;
  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; }
.sub { text-align: center; color: #565e59; margin: -8px 0 22px; font-size: 13px; }

.botao {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  width: fit-content; min-width: min(100%, 326px); max-width: 100%; min-height: 58px;
  margin: 10px auto 0; padding: 14px 18px; border-radius: 9999px;
  color: #fff; text-align: center; font-size: 14px; font-weight: 900;
  background: linear-gradient(100deg, #552514, #7c3719, #bd6d39);
  box-shadow: 0 10px 25px #63301852;
  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 #97460f80; }
}
@media (prefers-reduced-motion: reduce) { .botao, .comprar { animation: none; } }

/* ===== Topo ===== */
.topo { text-align: center; padding-top: 22px; padding-bottom: 18px; }
.topo h1 {
  margin: 0 auto 10px; max-width: 650px; 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 { margin: 0 auto 8px; max-width: 660px; font-size: 18px; font-weight: 800; line-height: 1.25; color: #4b2b1c; }
.topo-arte { position: relative; margin-top: 12px; overflow: hidden; border-radius: 12px; background: #e8d0c8; }
.topo-arte picture { display: block; }
.topo-arte picture img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.topo-mockup {
  position: absolute; z-index: 1; left: -2%; bottom: 2%;
  width: 49%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 12px 15px #26141d80);
}
.topo-texto { margin: 16px auto 4px; max-width: 650px; font-size: 14px; line-height: 1.5; color: #4f382c; }
.micro { margin: 8px auto 0; font-size: 11px; color: #795b4a; }

/* ===== Benefícios ===== */
.beneficios { padding-block: 22px 24px; }
.beneficios .titulo { font-size: 28px; }
.beneficios-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.beneficio {
  display: flex; flex-direction: column; justify-content: center; align-items: 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 #0000000c;
}
.beneficio span { font-size: 22px; }
.beneficio strong { font-size: 12px; font-weight: 800; line-height: 1.25; }
@media (max-width: 380px) { .beneficio { min-height: 105px; } }

/* ===== Sabores ===== */
.sabores { padding-block: 24px; 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;
  border-radius: 999px; background: var(--cobre);
}
.sabores-intro p { margin: 10px auto 0; font-size: 12px; color: #565e59; }
.sabores-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: calc(100% - 24px); margin: 0 auto; }
.sabor { overflow: hidden; background: #fff; border: 1px solid #eadfd5; border-radius: 15px; box-shadow: 0 7px 18px #4b2b1c17; }
.sabor img { width: 100%; height: 108px; object-fit: cover; }
.sabor div { min-height: 88px; padding: 9px 8px 11px; text-align: center; }
.sabor h3 { margin: 0 0 6px; font-size: 13px; font-weight: 950; line-height: 1.15; text-transform: uppercase; color: var(--marrom); }
.sabor p { margin: 0; font-size: 11px; line-height: 1.35; color: #75645a; }

/* ===== Conversas (carrossel) ===== */
.conversas { padding-block: 20px 24px; --ponto: #c6d4ca; --ponto-ativo: #783719; }
.conversas .titulo { max-width: 340px; font-size: 29px; }
.setas { display: flex; justify-content: flex-end; gap: 9px; max-width: 350px; margin: -5px auto 9px; }
.setas button {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid #e0d6cd; color: #3d2a20;
  font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px #0000000d;
}
[data-trilho] { gap: 12px; padding: 4px 0 12px; }
.conversa {
  flex: 0 0 min(100%, 350px); overflow: hidden; margin: 0;
  background: #eee9e3; border: 1px solid #e4e5e1; border-radius: 16px; box-shadow: 0 10px 26px #00000016;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.conversa img { width: 100%; height: auto; }
.arraste { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #00a844b3; }
.arraste span { font-size: 19px; line-height: 1; }
.conversas [data-pontos] { margin-top: 13px; gap: 8px; }
.conversas [data-pontos] button, .conversas [data-pontos] button[aria-current="true"] { width: 9px; height: 9px; border-radius: 50%; }

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

/* ===== Bônus ===== */
.bonuses { padding-block: 27px; }
.bonus-lista { display: grid; gap: 11px; }
.bonus {
  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 #00000012;
}
.bonus img { width: 76px; height: 94px; object-fit: contain; }
.bonus-tag { position: absolute; top: -7px; left: 0; padding: 2px 8px; border-radius: 4px; background: var(--cobre); color: #fff; font-size: 9px; font-weight: 800; }
.bonus h3 { margin: 0 0 4px; font-size: 15px; font-weight: 900; line-height: 1.15; }
.bonus p { margin: 0 0 6px; font-size: 11px; color: #59635b; }
.bonus-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; font-weight: 800; }
.bonus-valor del { color: #9ca3af; }
.bonus-valor strong { padding: 4px 10px; border-radius: 9999px; font-size: 11px; letter-spacing: .02em; color: #00a844; background: #00c8531f; }

/* ===== Ofertas ===== */
.ofertas { padding-block: 29px 31px; background: linear-gradient(#fffaf5, #f9eee4); border-block: 1px solid #a8522533; }
.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 #00000014;
}
.plano-destaque { margin-top: 14px; border: 4px solid var(--marrom); box-shadow: 0 16px 35px #0000001c; }
.plano-recomendado {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  padding: 7px 20px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 900; letter-spacing: .1em; color: #fff;
  background: linear-gradient(90deg, #552514, #a85225); box-shadow: 0 5px 12px #63301844;
}
.plano-selo { align-self: center; margin-bottom: 6px; padding: 5px 16px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .05em; color: #59616b; background: #f3f4f6; }
.plano-destaque .plano-selo { color: #713116; background: #f5e5d8; }
.plano h3 { margin: 0 0 18px; font-size: 21px; font-weight: 900; line-height: 1.18; }
.plano ul { display: grid; gap: 8px; margin: 0 0 22px; text-align: left; }
.plano li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 650; line-height: 1.35; color: #444; }
.item span { font-weight: 900; color: var(--marrom); }
.plano li.item-bonus { gap: 7px; padding: 8px; border: 1px solid #ff6b001b; border-radius: 10px; font-size: 11px; color: #6c3b16; background: #fff9f2; }
.item-bonus span { flex: none; }
.plano-base { margin-top: auto; }
.plano-de { margin: 0 0 2px; font-size: 11px; font-weight: 700; color: #9ca3af; }
.plano-de span { padding-inline: 4px; color: #d1d5db; }
.plano-preco { margin: 0 0 8px; font-size: 44px; font-weight: 950; line-height: 1.1; color: var(--marrom); }
.comprar {
  display: block; width: 100%; min-height: 57px; margin: 0 0 8px; padding: 17px;
  border-radius: 999px; text-align: center; font-size: 14px; font-weight: 900; letter-spacing: .05em; color: #fff;
  background: linear-gradient(100deg, #552514, #7c3719, #bd6d39); box-shadow: 0 10px 25px #63301852;
  animation: pulsar 2.3s ease-in-out infinite;
}
.plano-garantias { display: flex; justify-content: center; gap: 15px; font-size: 9px; font-weight: 800; color: #9ca3af; }

/* ===== Garantia ===== */
.garantia { padding: 31px 0; text-align: center; color: #5f4638; background: #f1e3d7; }
.garantia-insta {
  width: min(100%, 470px); height: auto; margin: 0 auto 19px;
  border: 1px solid #d7bca7; border-radius: 16px; object-fit: contain; box-shadow: 0 12px 28px #62361f24;
}
.garantia h2, .garantia h3 { text-transform: uppercase; font-weight: 900; color: var(--marrom); }
.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; }

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

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