/* Página: 90 Barrinhas, Petiscos e Biscoitos Proteicos sem Glúten */

/* ---------- 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;
  --cobre: #a85225;
  --tinta: #2d1d16;
  display: block;
  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); } }

.titulo {
  text-align: center; text-transform: uppercase;
  letter-spacing: -.025em; margin: 0 auto 14px;
  font-size: 24px; font-weight: 900; line-height: 1.12;
}
.titulo em { color: var(--marrom); font-style: normal; }

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

/* ---------- Botões ---------- */
.botao-chamada, .botao-compra {
  color: #fff; text-align: center; font-weight: 900; font-size: 14px;
  background: linear-gradient(100deg, #552514, #783719, #bd6d39);
  box-shadow: 0 10px 25px #63301852;
  animation: pulsar 2.3s ease-in-out infinite;
}
.botao-chamada {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; min-width: min(100%, 326px); max-width: 100%; min-height: 58px;
  margin: 10px auto 0; padding: 14px 18px; border-radius: 9999px;
}
.botao-compra {
  display: block; width: 100%; min-height: 57px; margin: 0 0 8px; padding: 17px;
  border-radius: 999px; letter-spacing: .05em;
}
.botao-chamada:hover, .botao-compra:hover { filter: brightness(.95); }
@keyframes pulsar { 50% { transform: scale(1.025); box-shadow: 0 10px 30px #97460f80; } }
@media (prefers-reduced-motion: reduce) { .botao-chamada, .botao-compra { animation: none; } }

/* ---------- Topo ---------- */
.topo { padding-top: 22px; padding-bottom: 18px; text-align: center; }
.topo h1 {
  max-width: 650px; margin: 0 auto 10px;
  font-size: clamp(18px, 5.4vw, 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; 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-banner { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.topo-mockup {
  position: absolute; left: -2%; bottom: 2%; z-index: 1;
  width: 49%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 12px 15px #26141d80);
}
.topo-apoio { max-width: 610px; margin: 13px auto 14px; font-size: 13px; font-weight: 650; line-height: 1.45; color: #4f4038; }
.micro { margin: 8px auto 0; font-size: 11px; color: #795b4a; }

/* ---------- Benefícios ---------- */
.beneficios { padding-block: 22px 24px; }
.beneficios .titulo { max-width: 350px; font-size: 19px; font-weight: 750; letter-spacing: 0; line-height: 1.25; }
.beneficios-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.beneficio {
  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 #0000000c;
}
.beneficio span { font-size: 22px; }
.beneficio strong { font-size: 12px; font-weight: 800; line-height: 1.25; }

/* ---------- Galeria de receitas ---------- */
.galeria { padding-block: 24px; background: #f9f9f9; border-block: 1px solid #f0f0f0; }
.galeria-intro { width: calc(100% - 24px); margin: 0 auto 15px; text-align: center; }
.galeria-intro .titulo { margin-bottom: 0; }
.galeria-intro .titulo::after {
  content: ""; display: block; width: 80px; height: 4px; margin: 12px auto 0;
  border-radius: 999px; background: var(--cobre);
}
.galeria-intro > p { margin: 10px auto 0; font-size: 12px; color: #565e59; }
.receitas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px;
  width: calc(100% - 20px); margin-inline: auto;
}
.receita { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #eadfd7; border-radius: 15px; box-shadow: 0 7px 19px #4f2a1512; }
.receita img { width: 100%; height: auto; }
.receita-texto { height: 102px; padding: 9px 9px 10px; overflow: hidden; text-align: center; }
.receita h3, .receita p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.receita h3 { min-height: 32px; font-size: 13px; font-weight: 900; line-height: 1.2; text-transform: uppercase; color: #753b1c; }
.receita p { margin-top: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.28; color: #655b55; }

/* ---------- Depoimentos ---------- */
.depoimentos { padding-block: 20px 24px; }
.depoimentos .titulo { max-width: 340px; font-size: 29px; }
.setas { display: flex; justify-content: flex-end; gap: 8px; max-width: 350px; margin: -5px auto 9px; }
.setas button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 23px; color: #263c2f; background: #fff; border: 1px solid #dce3dc;
}
.conversas { gap: 12px; padding: 4px 0 12px; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; }
.conversas figure {
  flex: 0 0 min(100%, 350px); scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: #eee9e3; border: 1px solid #e4e5e1; border-radius: 16px; box-shadow: 0 10px 26px #00000016;
}
.conversas 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; }
.depoimentos [data-carrossel] { --ponto: #c6d4ca; --ponto-ativo: #a85225; }
.depoimentos [data-pontos] { gap: 8px; margin-top: 13px; }
.depoimentos [data-pontos] button { width: 9px; height: 9px; }
.depoimentos [data-pontos] button[aria-current="true"] { width: 9px; border-radius: 50%; }

/* ---------- Para quem é ---------- */
.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; 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 ---------- */
.bonus { padding-block: 27px; }
.bonus > p { margin: 0 auto 14px; text-align: center; font-size: 13px; line-height: 1.4; color: #565e59; }
.bonus-lista { display: grid; gap: 11px; }
.bonus-lista article {
  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-lista img { width: 76px; height: 94px; object-fit: contain; }
.bonus-tag { position: absolute; top: -7px; left: 0; padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; color: #fff; background: var(--cobre); }
.bonus-lista h3 { margin: 0 0 4px; font-size: 15px; font-weight: 900; line-height: 1.15; }
.bonus-lista article 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; }
.ofertas .miolo > p { margin: 0 auto 22px; text-align: center; font-size: 13px; line-height: 1.4; color: #565e59; }
.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: 700; line-height: 1.35; color: #444; }
.plano-itens li span { font-weight: 900; color: var(--marrom); }
.plano-destaque .plano-itens { margin-bottom: 12px; }
.plano .plano-bonus li { padding: 8px; gap: 7px; font-size: 11px; color: #6c3b16; background: #fff9f2; border: 1px solid #ff6b001b; border-radius: 10px; }
.plano-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: 900; line-height: 1.1; color: var(--marrom); }
.plano-garantias { display: flex; justify-content: center; gap: 15px; font-size: 9px; font-weight: 800; color: #9ca3af; }

/* ---------- Autora ---------- */
.autora { padding-block: 30px 28px; text-align: center; }
.autora .titulo { margin-bottom: 16px; }
.autora .titulo em { color: #10a94a; }
.autora-cartao { width: min(100%, 400px); margin-inline: auto; padding: 14px; overflow: hidden; background: #fff; border: 1px solid #e3e5e4; border-radius: 17px; box-shadow: 0 8px 24px #2c20150d; }
.autora-cartao img { width: 100%; height: auto; }
.autora > p { max-width: 395px; margin: 16px auto 0; font-size: 12.5px; line-height: 1.55; color: #433b37; }
.autora > p strong { color: #171717; }

/* ---------- Garantia ---------- */
.garantia { padding: 34px 18px 36px; text-align: center; color: #fff; background: #1d1d1d; }
.garantia img { width: min(47vw, 205px); height: auto; margin: 0 auto 20px; filter: drop-shadow(0 10px 18px #0006); }
.garantia h2 { margin-bottom: 8px; font-size: 23px; font-weight: 900; line-height: 1.15; color: #ffb300; }
.garantia h3 { margin-bottom: 14px; font-size: 17px; font-weight: 900; color: #ffb300; }
.garantia p { max-width: 390px; margin: 0 auto; font-size: 12px; line-height: 1.55; }

/* ---------- Perguntas frequentes ---------- */
.faq { padding-block: 27px; text-align: center; }
.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: 12px; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 15px 14px; font-size: 12px; color: #46544a; }
.faq > p { font-size: 12px; }
.faq .faq-final { margin: 25px auto 6px; font-size: 17px; font-weight: 900; }

/* ---------- 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; }