/* =========================================================
   Marmita sem Drama — landing page de vendas
   Aptus Digital · projeto conceito
   Paleta: creme #FFF6E5 · tangerina #FF6B1A · lima #C6F432 · preto #121212
   ========================================================= */

:root {
  --creme: #FFF6E5;
  --creme-alto: #FFFCF4;
  --creme-baixo: #F6E9D2;
  --tinta: #121212;
  --tinta-70: #4F4636;
  --tinta-55: #6B6152;
  --tangerina: #FF6B1A;
  --tangerina-tinta: #B84300;
  --tangerina-fundo: #FFE2CE;
  --lima: #C6F432;
  --linha: rgba(18, 18, 18, .16);
  --linha-forte: rgba(18, 18, 18, .34);
  --linha-clara: rgba(255, 246, 229, .22);

  --gut: clamp(1.15rem, 4.6vw, 2.25rem);
  --max: 1260px;
  --barra-h: 74px;
  /* medidos pelo script; empilham topo + buybar e ancoram as colunas sticky */
  --topo-h: 41px;
  --buybar-h: 60px;
  --sticky-top: calc(var(--topo-h) + var(--buybar-h) + 1.4rem);

  --display: "Anton", "Arial Narrow", sans-serif;
  --texto: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(.22, .68, .3, 1);
}

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
b, strong { font-weight: 700; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .005em;
  margin: 0;
  overflow-wrap: break-word;
}

.wrap { width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }

/* ---------- foco / skip ---------- */
:focus-visible {
  outline: 3px solid var(--tangerina-tinta);
  outline-offset: 3px;
  border-radius: 3px;
}
.sec--quem :focus-visible, .sec--final :focus-visible, .buybar :focus-visible { outline-color: var(--lima); }

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 60; background: var(--tinta); color: var(--creme);
  padding: .8rem 1.2rem; border-radius: 0 0 12px 12px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- topo (sticky: marca + CRN acompanham a rolagem inteira) ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--creme);
  border-bottom: 1px solid var(--linha);
}
.topo__in {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem 0;
}
.topo__marca {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .02em; line-height: 1;
}
.topo__meta {
  font-size: .875rem; color: var(--tinta-55); text-align: right;
  letter-spacing: .01em;
}

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: clamp(.85rem, 2.6vw, 3rem) 0 clamp(1.5rem, 3vw, 3.5rem); position: relative; }

.hero__grid { display: grid; gap: clamp(1rem, 3vw, 1.6rem); }

.eyebrow {
  display: flex; align-items: center; gap: .55rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--tangerina-tinta);
  margin: 0 0 .7rem;
}
.eyebrow__dot {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  background: var(--tangerina); box-shadow: 0 0 0 4px var(--tangerina-fundo);
}

h1 {
  font-size: clamp(2.15rem, 7.4vw, 3.9rem);
  line-height: .99;
  margin: 0 0 .62rem;
  letter-spacing: -.002em;
}

.mark {
  position: relative; z-index: 0; isolation: isolate;
  font-style: normal; white-space: nowrap;
}
.mark::before {
  content: ""; position: absolute; inset: 8% -.16em 12% -.16em;
  background: var(--lima); transform: rotate(-1.1deg); z-index: -1;
  border-radius: 2px;
}
.mark--dark { color: var(--tinta); }
.mark--dark::before { background: var(--tangerina); }

.hero__sub {
  font-size: clamp(1rem, 3.9vw, 1.2rem);
  line-height: 1.5;
  color: var(--tinta-70);
  margin: 0;
  max-width: 46ch;
}

/* ---------- capa do e-book (CSS puro) ---------- */
.hero__art {
  position: relative;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: .25rem 14px .2rem 0;
  --bw: clamp(152px, 43vw, 205px);
}

.book { perspective: 1500px; width: var(--bw); position: relative; z-index: 2; }
.book__3d {
  position: relative;
  width: var(--bw); height: calc(var(--bw) * 1.4);
  transform-style: preserve-3d;
  transform: rotateY(15deg) rotateX(3deg) rotate(-1.2deg);
  transition: transform .7s var(--ease);
}
.book:hover .book__3d { transform: rotateY(8deg) rotateX(1deg) rotate(-.4deg); }

.book__3d::after {
  content: ""; position: absolute; left: -8%; right: -6%; bottom: -7%;
  height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18,18,18,.3), rgba(18,18,18,0) 70%);
  transform: translateZ(-14px);
}

.book__spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 20px;
  transform-origin: left center; transform: rotateY(-90deg);
  background: linear-gradient(90deg, #000 0%, #262626 55%, #0a0a0a 100%);
  border-radius: 2px 0 0 2px;
}

.book__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--bw) * .085) calc(var(--bw) * .075) calc(var(--bw) * .075) calc(var(--bw) * .115);
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 0 3%, rgba(0,0,0,.35) 3% 6.5%, rgba(255,255,255,0) 12%),
    #121212;
  border-radius: 1px 5px 5px 1px;
  box-shadow: 0 18px 34px rgba(18,18,18,.3), 0 2px 0 rgba(255,255,255,.06) inset;
  color: var(--creme);
  overflow: hidden;
}

.book__kicker {
  font-size: calc(var(--bw) * .068);
  letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,246,229,.62);
  padding-right: calc(var(--bw) * .23);
  line-height: 1.2;
}
.book__title {
  display: block; margin-top: auto; padding-top: calc(var(--bw) * .1);
  font-family: var(--display); text-transform: uppercase;
  font-size: calc(var(--bw) * .225); line-height: .86; letter-spacing: .004em;
}
.book__title b { display: block; font-weight: 400; }
.book__title .l2 { color: var(--tangerina); padding-left: calc(var(--bw) * .035); }
.book__title .l3 { color: var(--lima); }

.book__rule {
  display: block; height: 2px; width: 34%;
  background: var(--creme); opacity: .5;
  margin: calc(var(--bw) * .07) 0 calc(var(--bw) * .055);
}
.book__by {
  display: block; font-size: calc(var(--bw) * .056); font-weight: 600;
  line-height: 1.3; letter-spacing: .01em;
}
.book__by small {
  display: block; font-size: calc(var(--bw) * .056); font-weight: 400;
  color: rgba(255,246,229,.62); letter-spacing: .06em; margin-top: .2em;
}

.book__bento {
  position: absolute; top: calc(var(--bw) * .075); right: calc(var(--bw) * .075);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  width: calc(var(--bw) * .155); aspect-ratio: 1;
  padding: 2px; border: 1.5px solid rgba(255,246,229,.55); border-radius: 3px;
}
.book__bento i { display: block; border-radius: 1px; }
.book__bento .c1 { background: var(--lima); }
.book__bento .c2 { background: rgba(255,246,229,.55); }
.book__bento .c3 { background: rgba(255,246,229,.3); }
.book__bento .c4 { background: var(--tangerina); }

/* ---------- planilha (CSS puro) ---------- */
.sheet {
  background: var(--creme-alto);
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(18,18,18,.14);
  padding: .45rem .5rem .5rem;
  font-size: 9px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 1px;
}
.sheet__cap {
  font-family: var(--display); text-transform: uppercase;
  font-size: 10px; letter-spacing: .04em; line-height: 1.2;
  padding-bottom: .3rem; margin-bottom: .2rem;
  border-bottom: 1.5px solid var(--tinta);
}
.sheet__row {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .16rem .12rem;
  border-bottom: 1px solid rgba(18,18,18,.1);
}
.sheet__row b { font-weight: 500; color: var(--tinta-70); }
.sheet__row i { font-style: normal; font-variant-numeric: tabular-nums; }
.sheet__row--head { background: var(--creme-baixo); font-weight: 700; }
.sheet__row--head b, .sheet__row--head i { color: var(--tinta); font-weight: 700; }
.sheet__row--tot {
  border-bottom: 0; margin-top: .15rem;
  background: var(--lima); font-weight: 700;
}
.sheet__row--tot b, .sheet__row--tot i { color: var(--tinta); font-weight: 700; }

/* a planilha se encosta na lombada do livro, inteira e legível */
.sheet--float {
  order: -1; flex: 0 0 auto; z-index: 1;
  width: clamp(112px, 30vw, 134px);
  padding-right: 24px;
  margin: 0 -19px 9% 0;
  transform: rotate(-6deg);
}

/* ---------- bloco de compra do hero ---------- */
.hero__buy { margin-top: .15rem; }

.preco {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .85rem;
}
.preco__val {
  font-family: var(--display); font-size: clamp(2.5rem, 11vw, 3.4rem);
  line-height: .82; letter-spacing: -.005em;
}
.preco__nota {
  font-size: .9375rem; line-height: 1.32; color: var(--tinta-70);
  border-left: 2px solid var(--tangerina); padding-left: .7rem;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.4rem;
  background: var(--tangerina); color: var(--tinta);
  font-family: var(--texto); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: .005em; text-decoration: none; border: 0; cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 6px 0 #C24A00, 0 12px 22px rgba(255,107,26,.28);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.btn svg { flex: 0 0 auto; transition: transform .25s var(--ease); }
.btn:hover { background: #FF7F38; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #C24A00, 0 5px 12px rgba(255,107,26,.25); }

.btn--big {
  width: 100%; min-height: 58px; font-size: clamp(1.0625rem, 4.3vw, 1.2rem);
  padding: 1rem 1.3rem;
}

.micro {
  margin: .75rem 0 0; font-size: .9375rem; line-height: 1.45;
  color: var(--tinta-55); max-width: 40ch;
}
.micro--claro { color: rgba(255,246,229,.68); }

/* =========================================================
   BARRA DE COMPRA
   ========================================================= */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--tinta); color: var(--creme);
  transform: translateY(115%);
  transition: transform .34s var(--ease);
  box-shadow: 0 -10px 30px rgba(18,18,18,.22);
  padding: .55rem 0 calc(.55rem + env(safe-area-inset-bottom, 0px));
}
.buybar.on { transform: none; }
.buybar__in { display: flex; align-items: center; gap: 1rem; }
.buybar__txt { display: none; }
.btn--bar {
  width: 100%; min-height: 50px; font-size: 1.0625rem;
  box-shadow: 0 4px 0 #C24A00;
}

/* =========================================================
   FAIXAS DE IMAGEM
   ========================================================= */
.faixa { position: relative; background: var(--tinta); }
.faixa img {
  width: 100%; height: clamp(190px, 44vw, 430px); object-fit: cover;
  display: block;
}
.faixa figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem var(--gut) .9rem;
  background: linear-gradient(to top, rgba(18,18,18,.92) 0%, rgba(18,18,18,.66) 45%, rgba(18,18,18,0) 100%);
  color: var(--creme);
}
.faixa figcaption span {
  display: block; width: min(100% , var(--max)); margin-inline: auto;
  font-size: .9375rem; line-height: 1.4; max-width: 46ch;
  text-shadow: 0 1px 8px rgba(18,18,18,.7);
}
.faixa--hero img { object-position: center 32%; }
.faixa--panela img { height: clamp(215px, 38vw, 380px); object-position: center 42%; }

/* =========================================================
   TIPOGRAFIA DE SEÇÃO
   ========================================================= */
.sec { padding: clamp(3rem, 8vw, 6.5rem) 0; }

.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-size: .875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tangerina-tinta);
  margin: 0 0 1rem;
}
.kicker span {
  font-family: var(--display); font-size: 1rem; letter-spacing: .02em;
  background: var(--tinta); color: var(--creme);
  padding: .16em .42em .1em; border-radius: 3px;
}
.kicker--claro { color: var(--lima); }
.kicker--claro span { background: var(--lima); color: var(--tinta); }

h2 {
  font-size: clamp(2rem, 7.6vw, 3.4rem);
  line-height: .99;
  margin: 0 0 1rem;
}
h3 { font-size: clamp(1.25rem, 5vw, 1.6rem); margin: 0 0 .6rem; }

.sec__intro {
  font-size: clamp(1.0625rem, 4vw, 1.2rem);
  color: var(--tinta-70); max-width: 44ch; margin: 0;
}
.sec__intro--claro { color: rgba(255,246,229,.75); }

/* =========================================================
   01 · PROBLEMA
   ========================================================= */
.sec--problema { border-top: 1px solid var(--linha); }
.sec__grid { display: grid; gap: clamp(1.6rem, 4vw, 2.5rem); }

.semana { border-top: 2px solid var(--tinta); counter-reset: d; }
.semana__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "dia hora ." "txt txt txt";
  column-gap: .7rem;
  align-items: baseline;
  padding: .95rem 0 1rem;
  border-bottom: 1px solid var(--linha);
}
.semana__dia {
  grid-area: dia;
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.5rem; line-height: 1; color: var(--tangerina-tinta);
}
.semana__hora {
  grid-area: hora;
  font-size: .875rem; font-weight: 600; letter-spacing: .06em;
  color: var(--tinta-55); font-variant-numeric: tabular-nums;
}
.semana__txt {
  grid-area: txt; margin: .3rem 0 0;
  font-size: 1.0625rem; line-height: 1.5;
}
.semana__item:last-child { border-bottom: 2px solid var(--tinta); }
.semana__item:last-child .semana__txt { color: var(--tinta-70); }

.viravolta { display: grid; gap: clamp(1.4rem, 4vw, 2.2rem); margin-top: clamp(2.2rem, 6vw, 3.6rem); }
.viravolta__img img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 4px;
}
.viravolta__txt p:last-child { margin-bottom: 0; }
.viravolta__txt .grande {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.45rem, 6.2vw, 2.1rem); line-height: .98;
  margin-bottom: .7rem;
}
.viravolta__txt p { color: var(--tinta-70); }
.viravolta__txt b { color: var(--tinta); }

/* =========================================================
   02 · O QUE TEM DENTRO
   ========================================================= */
.sec--dentro { background: var(--creme-baixo); }
.dentro__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.dentro__main .sec__intro { margin-bottom: clamp(1.6rem, 4vw, 2.2rem); }

/* accordion */
.acc { border-top: 2px solid var(--tinta); }
.acc__item { border-bottom: 1px solid var(--linha-forte); }
.acc__item:last-child { border-bottom: 2px solid var(--tinta); }

.acc summary {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.05rem .2rem 1.05rem 0;
  cursor: pointer; list-style: none;
  min-height: 56px;
  transition: background .18s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: rgba(255,107,26,.09); }

.acc__n {
  font-family: var(--display); font-size: 1.1rem; line-height: 1;
  color: var(--creme); background: var(--tinta);
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; padding-top: .14em;
}
.acc__t { flex: 1 1 auto; min-width: 0; }
.acc__t b {
  display: block; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  line-height: 1.04; letter-spacing: .008em;
}
.acc__t i {
  display: block; font-style: normal; font-size: .9375rem;
  color: var(--tinta-55); margin-top: .22em; line-height: 1.35;
}
.acc__sig {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--linha-forte); border-radius: 50%;
  color: var(--tinta);
  transition: transform .3s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.acc__item[open] .acc__sig {
  transform: rotate(135deg); background: var(--tangerina);
  border-color: var(--tangerina);
}
.acc__body { padding: 0 0 1.3rem; }
.acc--faq .acc__body { padding-left: 0; }
.acc__item[open] .acc__in { animation: subir .32s var(--ease) both; }
@keyframes subir { from { opacity: 0; transform: translateY(-7px); } }
.acc__in p { color: var(--tinta-70); margin: 0 0 .85rem; }
.acc__in p:last-child { margin-bottom: 0; }
.acc--faq .acc__in p { max-width: 62ch; }
.acc--faq .acc__t b {
  font-family: var(--texto); font-weight: 700; text-transform: none;
  font-size: clamp(1.0625rem, 4.2vw, 1.2rem); line-height: 1.3;
  letter-spacing: 0;
}

.check li {
  position: relative; padding-left: 1.75rem; margin-bottom: .6rem;
  font-size: 1rem; line-height: 1.5; color: var(--tinta-70);
}
.check li:last-child { margin-bottom: 0; }
.check li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--tangerina);
  box-shadow: 0 0 0 3px rgba(255,107,26,.2);
}

/* páginas-amostra em CSS */
.amostras { margin-bottom: clamp(1.6rem, 4vw, 2.2rem); }
.paginas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; align-items: start; }

.pagina {
  aspect-ratio: 3 / 4.05;
  background: var(--creme-alto);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(18,18,18,.13);
  padding: 8% 8% 9%;
  display: flex; flex-direction: column; gap: 5%;
  overflow: hidden;
}
.pagina--a { transform: rotate(-2deg); }
.pagina--b { transform: translateY(6px); }
.pagina--c { transform: rotate(2deg); }

.pagina__tag {
  font-size: 7px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tangerina-tinta); line-height: 1;
}
.pagina__h {
  font-family: var(--display); text-transform: uppercase;
  font-size: 13px; line-height: .95; letter-spacing: .01em;
  padding-bottom: 5%; border-bottom: 1.5px solid var(--tinta);
}
.pagina__lines { display: flex; flex-direction: column; gap: 3.5px; }
.pagina__lines i { display: block; height: 2.5px; border-radius: 2px; background: rgba(18,18,18,.19); }
.pagina__lines i:nth-child(2) { width: 88%; }
.pagina__lines i:nth-child(3) { width: 94%; }
.pagina__lines i:nth-child(4) { width: 62%; }
.pagina__chips { display: flex; gap: 3px; }
.pagina__chips b { display: block; height: 9px; border-radius: 2px; }
.pagina__chips .k1 { background: var(--tangerina); width: 34%; }
.pagina__chips .k2 { background: var(--lima); width: 26%; }
.pagina__chips .k3 { background: rgba(18,18,18,.2); width: 20%; }

.pagina__list { display: flex; flex-direction: column; gap: 4.5px; }
.pagina__list i {
  display: block; height: 2.5px; border-radius: 2px; background: rgba(18,18,18,.19);
  position: relative; margin-left: 8px;
}
.pagina__list i::before {
  content: ""; position: absolute; left: -8px; top: -2px;
  width: 5px; height: 5px; border: 1px solid var(--tinta-55); border-radius: 1px;
}
.pagina__list i:nth-child(odd) { width: 84%; }
.pagina__list i:nth-child(2) { width: 68%; }
.pagina__list i:nth-child(4) { width: 76%; }
.pagina__list i:nth-child(6) { width: 58%; }

.pagina__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pagina__grade i { display: block; aspect-ratio: 1; background: rgba(18,18,18,.08); border-radius: 1px; }
.pagina__grade i:nth-child(1), .pagina__grade i:nth-child(5) { background: var(--tangerina); opacity: .85; }
.pagina__grade i:nth-child(9) { background: var(--lima); }

.amostras figcaption, .lado__foto figcaption {
  font-size: .9375rem; line-height: 1.45; color: var(--tinta-55);
  margin-top: .8rem; max-width: 42ch;
}
.lado__foto img {
  width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 4px;
}

/* =========================================================
   03 · É PRA VOCÊ / NÃO É
   ========================================================= */
.sec--quem { background: var(--tinta); color: var(--creme); }
.sec--quem h2 { color: var(--creme); }
.quem__head { max-width: 40ch; margin-bottom: clamp(2rem, 5vw, 3rem); }

.quem__grid { display: grid; gap: clamp(1.4rem, 3.5vw, 2rem); }
.quem__col {
  border-top: 3px solid;
  padding-top: 1.2rem;
}
.quem__col--sim { border-color: var(--lima); }
.quem__col--nao { border-color: var(--tangerina); }

.quem__col h3 {
  display: flex; align-items: center; gap: .6rem;
  color: var(--creme); margin-bottom: 1.1rem;
}
.quem__ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.quem__col--sim .quem__ic { background: var(--lima); color: var(--tinta); }
.quem__col--nao .quem__ic { background: var(--tangerina); color: var(--tinta); }

.quem__col li {
  padding: .8rem 0; border-bottom: 1px solid var(--linha-clara);
  font-size: 1.0625rem; line-height: 1.5; color: rgba(255,246,229,.84);
}
.quem__col li:last-child { border-bottom: 0; }
.quem__col em { font-style: italic; color: var(--lima); }

/* =========================================================
   04 · BÔNUS
   ========================================================= */
.bonus__head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.bonus { display: grid; gap: clamp(2.2rem, 6vw, 3.4rem); }

.bonus__item {
  display: grid; gap: 1.1rem;
  padding-top: 1.4rem; border-top: 2px solid var(--tinta);
}
.bonus__n {
  font-family: var(--display); font-size: clamp(2.6rem, 11vw, 3.7rem);
  line-height: .8; color: var(--tangerina); margin: 0;
  -webkit-text-stroke: 1.5px var(--tinta);
  paint-order: stroke fill;
}
.bonus__txt h3 { margin-bottom: .55rem; }
.bonus__txt p { color: var(--tinta-70); }
.bonus__meta {
  font-size: .9375rem; color: var(--tinta-55);
  border-left: 2px solid var(--lima); padding-left: .75rem;
  margin-bottom: 0 !important;
}
.bonus__art { align-self: start; }
.bonus__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.bonus__item--inv .bonus__art { justify-self: end; }
.bonus__art figcaption {
  font-size: .9375rem; color: var(--tinta-55); margin-top: .7rem; line-height: 1.45;
}
.sheet--grande {
  width: 100%; max-width: 360px;
  font-size: 14px; padding: .85rem .9rem .95rem;
}
.sheet--grande .sheet__cap { font-size: 15px; letter-spacing: .03em; }
.sheet--grande .sheet__row { padding: .34rem .25rem; }

/* fecha a conta: quais são, nome por nome, as três planilhas do pacote */
.bonus__nota {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  background: var(--creme-alto);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--lima);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  font-size: 1rem; line-height: 1.55; color: var(--tinta-70);
  max-width: 78ch;
}
.bonus__nota b { color: var(--tinta); }

/* =========================================================
   05 · AUTOR
   ========================================================= */
.sec--autor { background: var(--creme-baixo); }
.autor__grid { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }
.autor__foto img {
  width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 4px;
}
.autor__txt p { color: var(--tinta-70); }
.autor__txt em { font-style: italic; color: var(--tinta); }

.assinatura {
  margin-top: 1.4rem !important; padding-top: 1rem;
  border-top: 1px solid var(--linha);
  font-size: .9375rem; color: var(--tinta-55) !important;
}
.assinatura span {
  display: block; font-family: var(--display); text-transform: uppercase;
  font-size: 1.35rem; line-height: 1; color: var(--tinta); margin-bottom: .2rem;
}

.aviso {
  display: flex; gap: .85rem; margin-top: 1.6rem;
  background: var(--creme-alto); border: 1px solid var(--linha);
  border-left: 4px solid var(--tangerina);
  padding: 1.1rem 1.1rem 1.1rem 1rem; border-radius: 4px;
}
.aviso__ic { flex: 0 0 auto; color: var(--tangerina-tinta); margin-top: .1rem; }
.aviso p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tinta-70); }

/* =========================================================
   06 · GARANTIA
   ========================================================= */
.sec--garantia {
  background: var(--tangerina); color: var(--tinta);
  padding: clamp(2.6rem, 7vw, 5rem) 0;
}
.garantia__grid { display: grid; gap: 1.4rem; }
.garantia__selo { color: var(--tinta); opacity: .9; }
.garantia__selo svg { width: clamp(92px, 26vw, 120px); height: auto; }
.garantia__txt .kicker { color: var(--tinta); }
.garantia__txt .kicker span { background: var(--tinta); color: var(--tangerina); }
.garantia__txt p { color: rgba(18,18,18,.82); max-width: 54ch; }
.garantia__txt p:last-child { margin-bottom: 0; }
.garantia__txt b { color: var(--tinta); }
.garantia__corpo { display: grid; gap: 0; }

/* =========================================================
   07 · FAQ
   ========================================================= */
.faq__grid { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); }

/* =========================================================
   08 · CTA FINAL
   ========================================================= */
.sec--final { background: var(--tinta); color: var(--creme); }
.sec--final h2 { color: var(--creme); }
.final__grid { display: grid; gap: clamp(1.8rem, 5vw, 3rem); }

.leva { margin: clamp(1.4rem, 4vw, 2rem) 0 clamp(1.6rem, 4vw, 2.2rem); }
.leva li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px solid var(--linha-clara);
  font-size: 1.0625rem; line-height: 1.45; color: rgba(255,246,229,.88);
}
.leva li b { white-space: nowrap; color: var(--creme); }
.leva li span {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lima); color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  margin-top: .05rem;
}
.btn--final { max-width: 420px; }
.final__foto img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  background: var(--creme-baixo);
  border-top: 3px solid var(--tinta);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(2rem, 4vw, 3rem);
}
.rodape__in { display: grid; gap: 1.4rem; }
.rodape__nome {
  display: block; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1;
}
.rodape__sub { display: block; font-size: .9375rem; color: var(--tinta-55); margin-top: .25rem; }
.rodape__cols { display: grid; gap: 1.1rem; }
.rodape__cols p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--tinta-70); }
.rodape__cols b { color: var(--tinta); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.rodape__legal {
  margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--linha);
  font-size: .875rem; line-height: 1.55; color: var(--tinta-55); max-width: 72ch;
}
.rodape__norma {
  margin: 0; font-size: .875rem; color: var(--tinta-55);
  padding-left: .8rem; border-left: 2px solid var(--tangerina);
}
.rodape__fim {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0;
  padding-top: 1rem; border-top: 1px solid var(--linha);
  font-size: .875rem; color: var(--tinta-55);
}

/* =========================================================
   ENTRADAS
   ========================================================= */
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}

/* =========================================================
   >= 560px
   ========================================================= */
@media (min-width: 560px) {
  .semana__item {
    grid-template-areas: "dia hora txt";
    align-items: baseline; column-gap: 1rem;
  }
  .semana__dia { min-width: 3.4rem; }
  .semana__hora { min-width: 3.6rem; }
  .semana__txt { margin-top: 0; }
  .rodape__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .paginas { gap: .8rem; }
  .btn--big { max-width: 430px; }
}

/* =========================================================
   >= 760px
   ========================================================= */
@media (min-width: 760px) {
  body { font-size: 1.09375rem; }
  .hero__art { --bw: clamp(210px, 26vw, 250px); justify-content: center; }

  .viravolta { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 2.4rem; }
  .quem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
  .autor__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 2.6rem; }

  .bonus__item {
    grid-template-columns: auto minmax(0, 1.25fr) minmax(0, .95fr);
    column-gap: clamp(1.5rem, 3.4vw, 3rem); align-items: start;
  }
  .bonus__n  { grid-column: 1; grid-row: 1; }
  .bonus__txt { grid-column: 2; grid-row: 1; }
  .bonus__art { grid-column: 3; grid-row: 1; }

  .bonus__item--inv { grid-template-columns: minmax(0, .95fr) auto minmax(0, 1.25fr); }
  .bonus__item--inv .bonus__art { grid-column: 1; }
  .bonus__item--inv .bonus__n  { grid-column: 2; }
  .bonus__item--inv .bonus__txt { grid-column: 3; }

  .garantia__grid { grid-template-columns: auto minmax(0, 1fr); gap: 2.4rem; align-items: start; }
  .garantia__corpo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .garantia__corpo p { max-width: 42ch; margin-bottom: 0; }
  .garantia__selo svg { width: 146px; }
  .autor__foto img { aspect-ratio: 4 / 5.1; }

  .final__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; align-items: center; }
}

/* =========================================================
   >= 900px — barra de compra vira sticky no topo
   ========================================================= */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .buybar {
    position: sticky; top: var(--topo-h); bottom: auto;
    transform: none !important;
    padding: .6rem 0;
    box-shadow: 0 8px 26px rgba(18,18,18,.18);
    border-bottom: 2px solid var(--lima);
  }
  .buybar__in { justify-content: space-between; }
  .buybar__txt {
    display: block; margin: 0; line-height: 1.2;
  }
  .buybar__txt b {
    display: block; font-family: var(--display); font-weight: 400;
    text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em;
  }
  .buybar__txt span { font-size: .875rem; color: rgba(255,246,229,.65); }
  .btn--bar { width: auto; min-height: 46px; padding: .7rem 1.5rem; }
}

/* =========================================================
   >= 900px — layouts de desktop
   ========================================================= */
@media (min-width: 900px) and (max-width: 1199px) {
  h1 { font-size: clamp(2.6rem, 4.6vw, 3.2rem); }
  h2 { font-size: clamp(2.2rem, 4vw, 2.9rem); }
}

@media (min-width: 900px) {
  .hero { padding: clamp(2.5rem, 4.5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 4rem); }
  .hero__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    grid-template-areas: "lead art" "buy art";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: clamp(1.6rem, 3vw, 2.4rem);
    align-items: start;
  }
  .hero__lead { grid-area: lead; }
  .hero__art {
    grid-area: art; align-self: center; justify-content: flex-end;
    --bw: clamp(190px, 20vw, 300px);
  }
  .hero__buy { grid-area: buy; max-width: 480px; align-self: start; }
  .hero__sub { max-width: 40ch; font-size: 1.25rem; }
  .btn--big { width: auto; min-width: 330px; max-width: none; }
  .preco__val { font-size: 3.8rem; }
  .preco__nota { font-size: 1rem; }

  .sheet--float { width: clamp(126px, 13vw, 172px); font-size: 11.5px; margin-bottom: 10%; }
  .sheet--float .sheet__cap { font-size: 12.5px; }

  .sec__grid {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .sec__head { position: sticky; top: var(--sticky-top); }

  .dentro__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* a lateral acompanha a altura do accordion: a foto absorve a sobra
     e as duas colunas terminam rentes, sem área creme vazia no rodapé */
  .dentro__lado {
    align-self: stretch;
    display: flex; flex-direction: column;
  }
  .amostras { flex: 0 0 auto; }
  .lado__foto {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .lado__foto img {
    flex: 1 1 auto; min-height: 280px;
    aspect-ratio: auto; height: auto;
  }
  .lado__foto figcaption { flex: 0 0 auto; }

  .quem__head { margin-bottom: 3.4rem; }
  .quem__grid { gap: 4rem; }

  .bonus__item { grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr); }
  .bonus__item--inv { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); }

  .faq__grid {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .faq__head { position: sticky; top: var(--sticky-top); }

  .rodape__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: 3rem; row-gap: 1.6rem;
  }
  .rodape__marca { grid-column: 1; }
  .rodape__cols { grid-column: 2; }
  .rodape__legal { grid-column: 1 / -1; }
  .rodape__norma { grid-column: 1 / -1; }
  .rodape__fim { grid-column: 1 / -1; justify-content: space-between; }
}

/* =========================================================
   >= 1280px
   ========================================================= */
@media (min-width: 1280px) {
  .faixa--hero img { height: 500px; }
  .sec { padding: 7rem 0; }
}

/* barra inferior no mobile: reserva de espaço */
@media (max-width: 899px) {
  body { padding-bottom: var(--barra-h); }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rv { opacity: 1 !important; transform: none !important; }
  .book__3d { transition: none; }
}