/* ==========================================================================
   CÓDIGO DIVINO — base.css
   Folha compartilhada por todas as versões da página (v1, v2, ...).
   Mobile-first. Sem animações. Sem dependências externas.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --------------------------------------------------------- tokens ------- */
:root {
  --c-ink: #17110b;
  --c-body: #4a4238;
  --c-white: #fff;

  --c-brown-900: #2a1a0d;
  --c-brown-700: #5b3d21;
  --c-brown-600: #6e4a2a;

  --c-gold: #e9b84a;
  --c-gold-soft: #f2cf7c;

  --c-sand: #e6dcc2;
  --c-sand-2: #efe8d6;

  --c-green: #16a34a;
  --c-green-d: #0f7c38;
  --c-red: #d92d20;

  --c-card: #edf0f4;
  --c-line: rgba(0, 0, 0, .09);

  --ff: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1080px;
  --narrow: 760px;
  --r: 14px;
  --pad: 20px;
  --sp: 56px;
}

@media (min-width: 768px) {
  :root { --pad: 32px; --sp: 88px; }
}

/* --------------------------------------------------------- reset -------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
/* o <img> herda o posicionamento do pai; o <source> não pode virar item de grid */
picture { display: contents; }
picture > source { display: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

/* --------------------------------------------------------- layout ------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: var(--narrow); }
.sec { padding-block: var(--sp); }
.center { text-align: center; }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 44px; }

/* --------------------------------------------------------- tipografia --- */
.h1 {
  font-size: clamp(1.5rem, 6.1vw, 2.75rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-white);
  text-wrap: balance;
}

.h2 {
  font-size: clamp(1.5rem, 5.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-ink);
  text-wrap: balance;
}

.h3 {
  font-size: clamp(1.25rem, 4.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
}

.eyebrow {
  font-size: clamp(1.15rem, 4.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.lead { font-size: clamp(1rem, 3.6vw, 1.15rem); line-height: 1.6; text-wrap: pretty; }
.gold { color: var(--c-gold); }
/* mesmo dourado, escurecido só sobre fundo claro (contraste AA) */
.band-sand .gold, .band-sand-2 .gold, .sec:not([class*="band"]) .gold { color: #a8781f; }
.brown { color: var(--c-brown-700); }
.green { color: var(--c-green); font-weight: 800; }

/* --------------------------------------------------------- cta ---------- */
.cta {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 18px 26px;
  border-radius: 999px;
  background: var(--c-green);
  color: var(--c-white);
  font: 700 clamp(.9rem, 3.4vw, 1.05rem)/1.2 var(--ff);
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .28);
}

.cta:hover, .cta:focus-visible { background: var(--c-green-d); animation-play-state: paused; }
.cta:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* pulse contínuo — só transform, roda na GPU, custo zero de layout */
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.cta { animation: cta-pulse 1.9s ease-in-out infinite; }

/* CTA fixo mobile ------------------------------------------------------- */
.cta-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--c-line);
}

.cta-bar .cta { padding: 15px 20px; box-shadow: none; }

@media (min-width: 768px) { .cta-bar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 80px; } }

/* --------------------------------------------------------- hero --------- */
.hero {
  position: relative;
  padding-block: 40px var(--sp);
  text-align: center;
  background-color: var(--c-brown-900);
  /* degradê puro em CSS — sem imagem, sem requisição.
     1ª camada: halo quente atrás do mockup. 2ª: luz do topo caindo para o marrom escuro. */
  background-image:
    radial-gradient(58% 42% at 50% 46%, rgba(233, 184, 74, .13) 0%, rgba(233, 184, 74, 0) 72%),
    radial-gradient(135% 88% at 50% -12%, #7d5620 0%, #573517 26%, #3a2310 50%, #2a1a0d 74%, #1e1408 100%);
}

.hero .lead { color: rgba(255, 255, 255, .88); max-width: 620px; margin-inline: auto; }
.hero__art { width: 100%; max-width: 560px; margin: 28px auto 0; }

/* desktop: hero inteiro na 1ª dobra — tudo escala pela ALTURA da tela,
   então o CTA fica visível de um notebook 720px a um monitor 1440px */
@media (min-width: 768px) {
  .hero { padding-block: clamp(18px, 3.2vh, 34px) clamp(30px, 5vh, 56px); }
  .hero .narrow { max-width: 900px; }
  .hero .eyebrow { font-size: clamp(1rem, 1.9vh + .3rem, 1.6rem); }
  .hero .h1 { font-size: clamp(1.65rem, 3.4vh + .7rem, 2.7rem); }
  .hero__art { width: auto; max-width: 640px; max-height: 46vh; margin-top: clamp(12px, 2.4vh, 24px); }
  .hero .lead { margin-top: clamp(12px, 2.2vh, 22px); font-size: clamp(.95rem, 1.5vh + .3rem, 1.15rem); }
  .hero .cta { margin-top: clamp(16px, 2.6vh, 26px); }
}

/* --------------------------------------------------------- faixas ------- */
.band-sand { background: var(--c-sand); }
.band-sand-2 { background: var(--c-sand-2); }
.band-brown { background: var(--c-brown-600); } /* disponível para variantes */
.band-dark { background: var(--c-brown-900); }
.band-brown .h2, .band-brown .lead, .band-dark .h2, .band-dark .lead { color: var(--c-white); }
.band-sand .lead, .band-sand-2 .lead { color: #4b402d; }

/* --------------------------------------------------------- card check --- */
.card {
  background: var(--c-white);
  border-radius: var(--r);
  padding: 32px 22px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

.checks { display: grid; gap: 18px; margin-top: 24px; text-align: left; }

.checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: clamp(.95rem, 3.5vw, 1.05rem);
  line-height: 1.5;
  color: var(--c-ink);
}

.checks svg { width: 22px; height: 22px; margin-top: 3px; fill: var(--c-green); }

/* --------------------------------------------------------- livros ------- */
.sec-intro { max-width: 640px; margin-inline: auto; }

.books { display: grid; gap: 16px; margin-top: 38px; }

.book {
  display: grid;
  gap: 18px;
  justify-items: center;
  align-content: start;
  padding: 26px 20px 28px;
  background: #faf6ee;
  border: 1px solid rgba(168, 120, 31, .2);
  border-radius: 16px;
  text-align: center;
}

.book img { width: 100%; max-width: 178px; }
.book p { font-size: .93rem; line-height: 1.55; color: var(--c-body); }

@media (min-width: 560px) { .books { grid-template-columns: repeat(2, 1fr); } }

/* 5 cards em 3 colunas: grid de 6 faixas p/ centralizar os 2 da última linha */
@media (min-width: 920px) {
  .books { grid-template-columns: repeat(6, 1fr); }
  .book { grid-column: span 2; }
  .book:nth-child(4) { grid-column: 2 / span 2; }
  .book:nth-child(5) { grid-column: 4 / span 2; }
}

/* --------------------------------------------------------- ventajas ----- */
.adv { display: grid; gap: 14px; max-width: 900px; margin: 36px auto 0; }

.adv li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 18px 20px;
  background: #faf6ee;
  border: 1px solid rgba(168, 120, 31, .2);
  border-radius: 12px;
  text-align: left;
}

.adv svg { width: 24px; height: 24px; margin-top: 2px; fill: var(--c-green); }
.adv b { display: block; color: var(--c-ink); font-size: 1rem; }
.adv span { font-size: .95rem; line-height: 1.5; }

@media (min-width: 768px) { .adv { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- público ------ */
.who { display: grid; gap: 20px; margin-top: 36px; }

.who article { background: var(--c-white); border-radius: var(--r); overflow: hidden; }
.who img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.who div { padding: 18px 20px 22px; text-align: left; }
.who b { display: block; color: var(--c-ink); font-size: 1.05rem; }
.who p { font-size: .95rem; line-height: 1.5; margin-top: 4px; }

@media (min-width: 768px) { .who { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- bonos -------- */
.bonos { display: grid; gap: 20px; margin-top: 36px; }

.bono {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 22px 20px;
  background: var(--c-card);
  border-radius: var(--r);
  text-align: left;
}

.bono img { width: 100%; max-width: 190px; margin-inline: auto; }
.bono b { display: block; color: var(--c-ink); font-size: 1.02rem; line-height: 1.35; }
.bono p { font-size: .94rem; line-height: 1.55; margin-top: 10px; }

.bono__tag {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-ink);
  margin-bottom: 10px;
}

.bono__price { margin-top: 14px; font-weight: 700; font-size: .95rem; }
.bono__price s { color: var(--c-red); text-decoration-thickness: 2px; }
.bono__price em { color: var(--c-green); font-style: normal; }

@media (min-width: 560px) {
  .bono { grid-template-columns: 1fr 190px; gap: 24px; padding: 26px 24px; text-align: left; }
}

/* --------------------------------------------------------- oferta ------- */
.offer__title {
  font-size: clamp(1.35rem, 5.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-ink);
  letter-spacing: -.02em;
}

.offer__title s { text-decoration-thickness: 3px; }

/* --------------------------------------------------------- oferta ------- */
.deal {
  max-width: 600px;
  margin: 44px auto 0;
  padding: 28px 22px 32px;
  background: #faf4e6;
  border: 1px solid rgba(168, 120, 31, .22);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(90, 62, 20, .1);
  text-align: center;
}

.deal__art { width: 100%; max-width: 400px; margin-inline: auto; }

/* rótulo discreto — quem carrega a hierarquia é o preço */
.deal__label {
  margin-top: 24px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #8d7a5c;
}

.deal__price { margin-top: 12px; font-size: clamp(1rem, 3.6vw, 1.08rem); line-height: 1.5; color: var(--c-body); }

.deal__price b {
  display: block;
  margin-top: 2px;
  font-size: clamp(2.3rem, 9vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--c-green-d);
}

.deal__note { margin-top: 10px; font-size: .88rem; color: #8a8079; }

.deal__intro {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(168, 120, 31, .25);
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink);
}

.deal__intro span { color: #a8781f; }

.deal__list {
  display: grid;
  gap: 10px;
  max-width: 400px;
  margin: 22px auto 0;
  text-align: left;
}

.deal__list li {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 11px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--c-ink);
}

/* respiro entre os 3 blocos: conteúdo · bônus · condições */
.deal__list li:nth-child(6), .deal__list li:nth-child(11) { margin-top: 12px; }
.deal__list span { text-align: center; opacity: .95; }

.deal__limit {
  display: inline-block;
  margin-top: 30px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(168, 96, 10, .25);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a8600a;
}

.deal__cups { margin-top: 10px; font-size: .84rem; color: #8a8079; }
.deal .cta { margin-top: 18px; max-width: 340px; }
.deal__ship { margin-top: 18px; font-size: .9rem; color: #6b625a; }
.deal__ship span { margin-right: 6px; }

@media (min-width: 560px) { .deal { padding: 34px 38px 38px; } }

/* --------------------------------------------------------- garantia ----- */
.guar {
  max-width: 640px;
  margin-inline: auto;
  padding: 34px 24px 36px;
  background: var(--c-white);
  border: 1px solid rgba(201, 146, 46, .35);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(90, 62, 20, .1);
  text-align: center;
}

.guar__head { display: grid; gap: 16px; justify-items: center; }
.guar__seal { width: 128px; height: auto; }
.guar__head .h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }

.guar__lead {
  margin-top: 26px;
  font-size: clamp(1.1rem, 4.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  text-wrap: balance;
}

.guar__txt { margin-top: 16px; font-size: .96rem; line-height: 1.6; }
.guar__txt strong { color: var(--c-ink); }

@media (min-width: 620px) {
  .guar { padding: 40px 40px 44px; }
  .guar__head { grid-template-columns: 128px 1fr; justify-items: start; gap: 26px; align-items: center; text-align: left; }
}

/* --------------------------------------------------------- faq ---------- */
.faq__q { color: #d92d20; }
.faq { display: grid; gap: 12px; margin-top: 36px; text-align: left; }

.faq details {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
}

.faq details[open] { border-color: rgba(22, 163, 74, .4); }

.faq summary {
  display: grid;
  grid-template-columns: 1fr 18px;
  gap: 16px;
  align-items: center;
  padding: 17px 20px;
  font-size: clamp(.97rem, 3.6vw, 1.06rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-right: 2.5px solid var(--c-green);
  border-bottom: 2.5px solid var(--c-green);
  transform: rotate(45deg);
}

.faq details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.faq p { padding: 0 20px 20px; font-size: .95rem; line-height: 1.6; }

/* --------------------------------------------------------- rodapé ------- */
.foot {
  padding: 32px var(--pad) 40px;
  background: var(--c-brown-900);
  color: rgba(255, 255, 255, .58);
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
}

.foot a { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------- a11y --------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { animation: none; }
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}