/* =========================================================
   Seu Bebê, de Perto — página de vendas
   Fontes auto-hospedadas (SIL Open Font License, ver assets/fonts)
   ========================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F6EAE2;
  --cream-light: #FBF5F0;
  --cream-deep: #EEDDD0;
  --blush: #F0D6C8;
  --blush-soft: #F5E4DA;
  --peach: #F2C6A8;
  --peach-deep: #D28E72;
  --ink: #3A2219;
  --ink-soft: #5C4237;
  --rose: #882B06;
  --rose-dark: #6A2004;
  --label: #8A3A1C;
  --line: rgba(58, 34, 25, .14);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section: clamp(4.5rem, 11vw, 8rem);
  --radius: 22px;
  --sticky-h: 0px;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  padding-bottom: var(--sticky-h);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 720px) { body { font-size: 1.125rem; } }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 6.2vw, 3rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--rose); }
em { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}

[id] { scroll-margin-top: 80px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: .7rem 1rem; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 1rem; }

.kicker {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 1rem;
}

.section { padding-block: var(--section); position: relative; }
.section__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section__head p:not(.kicker) { margin-top: 1rem; color: var(--ink-soft); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.4rem;
  padding: .95rem 1.75rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: .005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn--primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(106, 32, 4, .7);
}
.btn--primary::after {
  content: ""; width: .5rem; height: .5rem;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-left: .1rem;
}
.btn--primary:hover { background: var(--rose-dark); transform: translateY(-1px); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--block { width: 100%; }

/* ---------- Topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 234, 226, .9);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 60px; }
.brand { font-family: var(--serif); font-size: 1.15rem; font-weight: 550; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand em { color: var(--rose); font-weight: 450; }
.nav { display: none; }
.topbar__cta {
  font-size: .92rem; font-weight: 650; color: var(--rose); text-decoration: none;
  padding: .55rem 1rem; border: 1.5px solid currentColor; border-radius: 999px; white-space: nowrap;
}
.topbar__cta:hover { background: var(--rose); color: #fff; border-color: var(--rose); }

@media (min-width: 900px) {
  .nav { display: block; }
  .nav ul { display: flex; gap: 2rem; }
  .nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500; }
  .nav a:hover { color: var(--rose); }
}

/* ---------- 1. Primeira dobra ---------- */
.hero { position: relative; overflow: hidden; padding: 1.5rem 0 clamp(4rem, 10vw, 7rem); }
.hero__shape { position: absolute; z-index: 0; pointer-events: none; }
.hero__shape--a {
  width: 520px; height: 520px; right: -190px; top: -150px;
  background: var(--blush);
  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
}
.hero__shape--b {
  width: 300px; height: 300px; left: -170px; bottom: -40px;
  background: var(--peach); opacity: .55;
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: 1.6rem; }
.hero__cover {
  order: -1; margin: 0; position: relative;
  display: grid; grid-template-columns: min(36vw, 144px) 1fr; align-items: center; gap: 1.15rem;
}
.hero__cover img {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(59,42,47,.05), 0 26px 48px -22px rgba(80, 40, 46, .45);
}
.hero__cover figcaption { font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.hero__cover figcaption strong {
  display: block; margin-bottom: .3rem;
  font-size: .78rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--label);
}
.hero .tag { display: none; }
.tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  color: var(--label);
  background: rgba(252, 247, 242, .8);
  border: 1px solid var(--line);
  padding: .4rem .85rem; border-radius: 999px;
  margin-bottom: 1.25rem;
}
.tag__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--peach-deep); }
.hero h1 { font-size: clamp(1.8rem, 7.9vw, 3.6rem); line-height: 1.08; }
.hero h1 em { display: block; color: var(--rose); font-weight: 420; margin-top: .2em; }
.hero__lead { margin-top: 1rem; font-size: 1.04rem; color: var(--ink-soft); max-width: 34rem; }
.hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.hero__actions .btn { width: 100%; }
.hero__for { font-size: .95rem; color: var(--ink-soft); display: flex; align-items: center; gap: .55rem; }
.hero__for::before { content: ""; width: 1.4rem; height: 1px; background: var(--rose); }

@media (min-width: 560px) {
  .hero__actions .btn { width: auto; }
}
@media (min-width: 960px) {
  .hero { padding-top: 4.5rem; }
  .hero__grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 4rem; }
  .hero__cover { order: 0; display: block; width: 100%; max-width: 460px; justify-self: end; }
  .hero__cover figcaption { margin-top: 1rem; font-size: .85rem; }
  .hero__cover figcaption strong { display: inline; margin: 0 .35rem 0 0; font-size: .72rem; }
  .hero .tag { display: inline-flex; }
  .hero__shape--a { width: 760px; height: 760px; right: -210px; top: -160px; }
  .hero__shape--b { width: 420px; height: 420px; left: -230px; bottom: -150px; }
  .hero__lead { font-size: 1.2rem; }
}

/* ---------- 2. Identificação ---------- */
.questions { background: var(--cream-light); }
.questions__intro { max-width: 38rem; }
.questions__intro p:not(.kicker) { margin-top: 1rem; color: var(--ink-soft); }
.questions__list { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; }
.questions__list li {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.25;
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.questions__list li:last-child { border-bottom: 1px solid var(--line); }
.questions__list li::before {
  content: ""; display: block; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--peach-deep); margin-bottom: .7rem;
}
.questions__close { margin-top: 2rem; max-width: 34rem; color: var(--ink-soft); }
@media (min-width: 820px) {
  .questions__list { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  .questions__list li:nth-child(even) { transform: translateY(2.2rem); }
  .questions__list li:nth-child(3) { border-bottom: 1px solid var(--line); }
  .questions__close { margin-top: 4.5rem; }
}

/* ---------- 3. Benefícios ---------- */
.benefits__list { counter-reset: b; display: grid; gap: 0; }
.benefits__list li {
  counter-increment: b;
  position: relative;
  padding: 1.6rem 0 1.6rem 3.4rem;
  border-top: 1px solid var(--line);
}
.benefits__list li::before {
  content: counter(b, decimal-leading-zero);
  position: absolute; left: 0; top: 1.55rem;
  font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--rose);
}
.benefits__list h3 { margin-bottom: .45rem; }
.benefits__list p { color: var(--ink-soft); }
.inline-cta { margin-top: 2.5rem; }
@media (min-width: 720px) {
  .benefits__list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
@media (min-width: 1040px) {
  .benefits__list { grid-template-columns: repeat(3, 1fr); column-gap: 3.5rem; }
  .benefits__list li { padding: 2rem 0 2.2rem; }
  .benefits__list li::before { position: static; display: block; margin-bottom: 1.1rem; }
}

/* ---------- 4. Por dentro ---------- */
.inside { background: var(--blush-soft); overflow: hidden; }
.inside__grid { display: grid; gap: 2.5rem; }
.inside__head p:not(.kicker) { margin-top: 1rem; color: var(--ink-soft); max-width: 30rem; }
.toc {
  position: relative;
  background: var(--cream-light);
  border-radius: 6px 24px 24px 6px;
  padding: 1.75rem 1.4rem 1.75rem 2rem;
  box-shadow: 0 30px 60px -36px rgba(80, 40, 46, .45);
}
.toc::before { /* lombada da página */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(90deg, var(--peach), var(--blush));
  border-radius: 6px 0 0 6px;
}
.toc__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.35rem 0; }
.toc__item + .toc__item { border-top: 1px dashed rgba(59, 42, 47, .22); }
.toc__num { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--peach-deep); font-weight: 400; min-width: 2.6rem; }
.toc h3 { margin-bottom: .4rem; }
.toc p { color: var(--ink-soft); }
@media (min-width: 960px) {
  .inside__grid { grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: start; }
  .inside__head { position: sticky; top: 110px; }
  .toc { padding: 2.5rem 2.75rem 2.5rem 3.25rem; }
  .toc__num { font-size: 2.6rem; min-width: 3.4rem; }
}

/* ---------- 5. Ferramentas ---------- */
.tools { overflow: hidden; }
.tools__bg {
  position: absolute; inset: 8% -20% auto auto; width: 70vw; max-width: 760px; aspect-ratio: 1;
  background: var(--peach); opacity: .35;
  border-radius: 43% 57% 52% 48% / 55% 45% 55% 45%;
  z-index: 0;
}
.tools .wrap { position: relative; z-index: 1; }
.tools__list { display: grid; gap: 1rem; }
.tool {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; row-gap: .3rem;
  background: rgba(252, 247, 242, .85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem;
}
.tool__icon {
  grid-row: span 2;
  width: 3rem; height: 3rem; padding: .55rem;
  background: var(--blush); border-radius: 50%;
  fill: none; stroke: var(--rose); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tool h3 { font-size: 1.15rem; align-self: end; }
.tool p { color: var(--ink-soft); font-size: .98rem; }
@media (min-width: 720px) {
  .tools__list { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
  .tool { grid-column: span 2; grid-template-columns: 1fr; padding: 1.75rem; }
  .tool__icon { grid-row: auto; margin-bottom: 1rem; }
  .tool:nth-child(4) { grid-column: 2 / span 2; }
  .tool:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------- 6. Para quem é ---------- */
.audience { background: var(--cream-light); }
.audience__grid { display: grid; gap: 2.25rem; }
.audience__list li {
  padding: 1.15rem 0 1.15rem 2.2rem; position: relative; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.audience__list li:first-child { border-top: 1px solid var(--line); }
.audience__list li::before {
  content: ""; position: absolute; left: 0; top: 1.75rem; width: 1.2rem; height: 1px; background: var(--rose);
}
.audience__list strong { color: var(--ink); font-weight: 650; }
.notice {
  background: var(--cream);
  border-radius: 4px var(--radius) var(--radius) 4px;
  border-left: 4px solid var(--peach-deep);
  padding: 1.5rem 1.5rem 1.5rem 1.6rem;
}
.notice h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.notice p { color: var(--ink-soft); font-size: .98rem; }
@media (min-width: 960px) {
  .audience__grid { grid-template-columns: 1fr 1fr; column-gap: 5rem; row-gap: 3rem; }
  .notice { grid-column: 2; }
}

/* ---------- 7. Oferta ---------- */
.offer { padding-block: clamp(4rem, 9vw, 7rem); }
.offer__card {
  position: relative; overflow: hidden;
  display: grid; gap: 2rem;
  background: var(--ink); color: var(--cream);
  border-radius: 28px;
  padding: 2.25rem 1.4rem 2rem;
}
.offer__card::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -200px; top: -180px;
  background: var(--rose); opacity: .35;
  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
}
.offer__media, .offer__body { position: relative; }
.offer__media { justify-self: center; width: min(64vw, 280px); }
.offer__media img { border-radius: 16px; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .6); }
.offer .kicker { color: var(--peach); }
.offer h2 { font-size: clamp(2rem, 7vw, 2.8rem); color: #fff; }
.offer h2 span { display: block; font-style: italic; font-weight: 400; font-size: .55em; color: var(--blush); margin-top: .45rem; letter-spacing: 0; }
.offer__includes { margin: 1.6rem 0 1.25rem; display: grid; gap: .7rem; }
.offer__includes li { position: relative; padding-left: 1.9rem; color: rgba(252, 247, 242, .9); }
.offer__includes li::before {
  content: ""; position: absolute; left: .15rem; top: .45em; width: .95rem; height: .5rem;
  border-left: 2px solid var(--peach); border-bottom: 2px solid var(--peach);
  transform: rotate(-45deg);
}
.offer__format { font-size: .95rem; color: rgba(252, 247, 242, .78); }
.offer__price {
  margin: 1.6rem 0 1.25rem; padding-top: 1.35rem;
  border-top: 1px solid rgba(252, 247, 242, .18);
  display: flex; flex-direction: column; gap: .2rem;
}
.offer__price-label { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--peach); font-weight: 600; }
.offer__price-value { font-family: var(--serif); font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; color: #fff; }
.offer__price-value.is-pending { font-size: 1.5rem; font-style: italic; color: var(--blush); }
.offer .btn--primary { background: var(--peach); color: var(--ink); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7); }
.offer .btn--primary:hover { background: #F8DCC6; }
.offer :focus-visible { outline-color: var(--peach); }
.offer__secure { margin-top: .9rem; font-size: .9rem; color: rgba(252, 247, 242, .78); text-align: center; }
.offer__pending {
  margin-top: 1rem; font-size: .85rem; line-height: 1.5;
  color: var(--blush); text-align: center;
  border: 1px dashed rgba(242, 211, 206, .45); border-radius: 12px; padding: .7rem .9rem;
}
.offer__pending.is-highlight { border-color: var(--peach); color: #fff; }
@media (min-width: 900px) {
  .offer__card { grid-template-columns: 340px 1fr; gap: 4rem; padding: 4rem 4rem; align-items: center; }
  .offer__media { width: 100%; }
  .offer__price { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .offer__body .btn { max-width: 26rem; }
  .offer__secure, .offer__pending { text-align: left; max-width: 26rem; }
}

/* ---------- 8. FAQ ---------- */
.faq__grid { display: grid; gap: 2rem; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background:
    linear-gradient(var(--rose), var(--rose)) center / 12px 2px no-repeat,
    linear-gradient(var(--rose), var(--rose)) center / 2px 12px no-repeat,
    var(--blush-soft);
  transition: transform .25s ease;
}
.faq details[open] summary::after {
  background:
    linear-gradient(var(--rose), var(--rose)) center / 12px 2px no-repeat,
    var(--blush);
  transform: rotate(180deg);
}
.faq summary:hover { color: var(--rose); }
.faq__a { padding: 0 3rem 1.4rem 0; color: var(--ink-soft); }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; }
}

/* ---------- 9. Encerramento ---------- */
.closing { position: relative; overflow: hidden; background: var(--blush); padding-block: clamp(4.5rem, 11vw, 7.5rem); text-align: center; }
.closing__shape {
  position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; transform: translate(-50%, -50%);
  border: 1px solid rgba(136, 43, 6, .25); border-radius: 50%;
}
.closing__inner { position: relative; z-index: 1; max-width: 46rem; }
.closing h2 { font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 450; }
.closing p { margin: 1.25rem auto 2rem; color: var(--ink-soft); max-width: 32rem; }

/* ---------- 10. Rodapé ---------- */
.footer { background: var(--cream-deep); padding: 3.5rem 0 3rem; font-size: .95rem; color: var(--ink-soft); }
.footer__grid { display: grid; gap: 1.75rem; }
.footer__brand { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.footer__brand em { color: var(--rose); }
.footer__owner { margin-top: .35rem; }
.footer__links { display: grid; gap: .55rem; }
.footer__links a { color: var(--ink); }
.footer__links .is-pending { color: var(--ink-soft); font-style: italic; }
.footer__disclaimer { font-size: .85rem; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 1.5rem; max-width: 52rem; }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__disclaimer { grid-column: 1 / -1; }
}

/* ---------- Botão fixo (celular) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(246, 234, 226, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
.btn--sticky { width: 100%; min-height: 3rem; padding-block: .7rem; font-size: 1rem; }
@media (min-width: 960px) { .sticky-cta { display: none; } }

/* =========================================================
   ANIMAÇÕES
   Tudo aqui é desligado para quem prefere movimento reduzido.
   O conteúdo só começa oculto quando o JavaScript está ativo (.js).
   ========================================================= */

/* Barra de progresso da leitura */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--peach-deep), var(--rose));
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
}

/* Topo encolhe ao rolar */
.topbar__inner { transition: height .35s ease; }
.topbar.is-scrolled .topbar__inner { height: 52px; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: var(--rose); transform: scaleX(0); transform-origin: right; transition: transform .35s ease;
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-active { color: var(--rose); }

/* ---------- Revelação ao rolar ---------- */
.js [data-rv] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease, clip-path 1.1s cubic-bezier(.7,0,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js [data-rv="up"]    { transform: translateY(34px); }
.js [data-rv="down"]  { transform: translateY(-24px); }
.js [data-rv="left"]  { transform: translateX(-44px); }
.js [data-rv="right"] { transform: translateX(44px); }
.js [data-rv="zoom"]  { transform: scale(.9); }
.js [data-rv="blur"]  { filter: blur(10px); transform: translateY(16px); }
.js [data-rv="tilt"]  { transform: perspective(900px) rotateX(14deg) translateY(40px); transform-origin: 50% 100%; }
.js [data-rv="wipe"]  { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-rv].is-in   { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* Linhas que se desenham */
.js [data-line] { position: relative; }
.js [data-line]::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--rose); opacity: .5;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.2s cubic-bezier(.7,0,.2,1) calc(var(--i, 0) * 90ms + .1s), opacity 1.6s ease 1.2s;
}
.js [data-line].is-in::after { transform: scaleX(1); opacity: 0; }

/* ---------- Primeira dobra ---------- */
.js .hero h1 .w {
  display: inline-block; opacity: 0; transform: translateY(.55em) rotate(2deg);
  animation: wordIn .8s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.15s + var(--w) * 55ms);
}
@keyframes wordIn { to { opacity: 1; transform: none; } }

.js .hero__lead, .js .hero__actions, .js .hero .tag, .js .hero__cover figcaption {
  opacity: 0; animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.js .hero .tag { animation-delay: .05s; }
.js .hero__lead { animation-delay: .75s; }
.js .hero__actions { animation-delay: .95s; }
.js .hero__cover figcaption { animation-delay: 1.1s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.js .hero__cover picture {
  display: block; opacity: 0;
  animation: coverIn 1.2s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
@keyframes coverIn { from { opacity: 0; transform: translateY(30px) scale(.92) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* Capa flutuando + inclinação ao passar o mouse */
.hero__cover picture { position: relative; z-index: 1; }
.hero__cover img {
  animation: float 6s ease-in-out 1.4s infinite;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s ease;
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
/* brilho que atravessa a capa */
.hero__cover picture::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0;
  animation: shine 7s ease-in-out 2s infinite;
  mix-blend-mode: soft-light;
}
@keyframes shine { 0%, 70% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* anel pulsando atrás da capa */
.hero__cover-ring {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1.5px solid rgba(136, 43, 6, .22);
  animation: ringPulse 4.5s ease-out infinite;
}
.hero__cover-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(210, 142, 114, .35);
  animation: ringPulse 4.5s ease-out 2.25s infinite;
}
@keyframes ringPulse { 0% { scale: .75; opacity: 0; } 30% { opacity: 1; } 100% { scale: 1.12; opacity: 0; } }
@media (max-width: 959px) {
  .hero__cover-ring { left: calc(min(36vw, 144px) / 2); width: calc(min(36vw, 144px) * 1.35); }
}

/* Formas orgânicas que respiram e reagem à rolagem */
.hero__shape, .tools__bg, .offer__card::before {
  animation: morph 14s ease-in-out infinite alternate;
}
.hero__shape--a { translate: 0 calc(var(--sy, 0) * .18px); }
.hero__shape--b { translate: 0 calc(var(--sy, 0) * -.12px); animation-duration: 18s; animation-direction: alternate-reverse; }
.tools__bg { animation-duration: 20s; }
@keyframes morph {
  0%   { border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%; rotate: 0deg; }
  50%  { border-radius: 42% 58% 60% 40% / 45% 58% 42% 55%; rotate: 8deg; }
  100% { border-radius: 50% 50% 38% 62% / 60% 40% 60% 40%; rotate: -6deg; }
}

/* Partículas suaves subindo na primeira dobra */
.hero__dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__dots i {
  position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--peach-deep); opacity: 0;
  animation: rise 11s linear infinite;
}
.hero__dots i:nth-child(1) { left: 6%;  animation-delay: 0s;   width: 6px; height: 6px; }
.hero__dots i:nth-child(2) { left: 18%; animation-delay: 3.5s; }
.hero__dots i:nth-child(3) { left: 31%; animation-delay: 6s;   width: 5px; height: 5px; }
.hero__dots i:nth-child(4) { left: 46%; animation-delay: 1.5s; width: 10px; height: 10px; background: var(--blush); }
.hero__dots i:nth-child(5) { left: 58%; animation-delay: 8s; }
.hero__dots i:nth-child(6) { left: 69%; animation-delay: 4.5s; width: 6px; height: 6px; background: var(--rose); }
.hero__dots i:nth-child(7) { left: 79%; animation-delay: 2.5s; width: 12px; height: 12px; background: var(--peach); }
.hero__dots i:nth-child(8) { left: 88%; animation-delay: 7s; }
.hero__dots i:nth-child(9) { left: 95%; animation-delay: 9.5s; width: 5px; height: 5px; }
@keyframes rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .55; }
  50%  { transform: translate(18px, -45vh); }
  85%  { opacity: .4; }
  100% { transform: translate(-12px, -95vh); opacity: 0; }
}

/* ---------- Faixa rolando ---------- */
.marquee {
  overflow: hidden; background: var(--rose); color: var(--cream-light);
  padding-block: .95rem; position: relative;
}
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track > div { display: flex; align-items: center; flex: none; }
.marquee span {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 4vw, 1.7rem);
  padding-inline: 1.4rem; white-space: nowrap;
}
.marquee b { color: var(--peach); font-weight: 400; font-size: .9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Detalhes por seção ---------- */
.questions__list li::before { animation: dotPulse 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes dotPulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.6; opacity: .55; } }

.benefits__list li::before { display: inline-block; transition: transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms + .2s), opacity .9s ease calc(var(--i, 0) * 90ms + .2s); }
.js .benefits__list li:not(.is-in)::before { transform: translateY(14px) rotate(-12deg); opacity: 0; }
.benefits__list li { transition: background-color .4s ease; }
.benefits__list li:hover h3 { color: var(--rose); }
.benefits__list h3 { transition: color .3s ease; }

/* Lombada do sumário se enchendo com a rolagem */
.toc::before { transform-origin: 50% 0; transform: scaleY(var(--fill, 1)); transition: transform .2s linear; }
.js .toc { --fill: 0; }
.toc__num { display: inline-block; transition: transform .5s cubic-bezier(.2,.7,.2,1), color .3s ease; }
.toc__item:hover .toc__num { transform: translateY(-4px) scale(1.08); color: var(--rose); }

/* Ícones das ferramentas se desenhando */
.tool__icon * { stroke-dasharray: 160; stroke-dashoffset: 0; }
.js .tool:not(.is-in) .tool__icon * { stroke-dashoffset: 160; }
.tool__icon * { transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) calc(var(--i, 0) * 120ms + .35s); }
.tool { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; }
.tool:hover, .js .tool.is-in:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -26px rgba(106, 32, 4, .45); border-color: rgba(136, 43, 6, .3); }
.tool__icon { transition: transform .5s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
.tool:hover .tool__icon { transform: rotate(-8deg) scale(1.08); background: var(--peach); }

/* Público: traços crescendo */
.audience__list li::before { transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 120ms + .3s); }
.js .audience__list li:not(.is-in)::before { transform: scaleX(0); }
.notice { position: relative; overflow: hidden; }
.notice::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0;
}
.notice.is-in::after { animation: shine 2.4s ease .6s 1 forwards; }

/* Oferta */
.offer__includes li::before { transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i, 0) * 120ms + .5s); }
.js .offer__card:not(.is-in) .offer__includes li::before { transform: rotate(-45deg) scale(0); }
.offer__card.is-in .offer__media img { animation: float 6s ease-in-out 1.2s infinite; }
.offer__price-value { background: linear-gradient(90deg, #fff 0%, #fff 40%, var(--peach) 50%, #fff 60%, #fff 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShine 5s linear infinite; }
.offer__price-value.is-pending { background: none; color: var(--blush); animation: none; }
@keyframes textShine { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* Botões: brilho passando, seta animada, pulso */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 140% 0;
  animation: btnShine 4.5s ease-in-out 2s infinite;
}
@keyframes btnShine { 0%, 60% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.btn--primary::after { transition: translate .3s ease; }
.btn--primary:hover::after { translate: 4px 0; }
.btn--primary:active { transform: scale(.97); }
.offer [data-checkout], .closing [data-checkout] { animation: pulse 2.6s ease-out 1.5s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(242, 198, 168, .65); }
  70%  { box-shadow: 0 0 0 16px rgba(242, 198, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 198, 168, 0); }
}
.closing [data-checkout] { animation-name: pulseDark; }
@keyframes pulseDark {
  0%   { box-shadow: 0 0 0 0 rgba(136, 43, 6, .45); }
  70%  { box-shadow: 0 0 0 16px rgba(136, 43, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(136, 43, 6, 0); }
}
.topbar__cta { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.topbar__cta:hover { transform: translateY(-1px); }

/* FAQ: abertura suave */
.faq details { transition: background-color .3s ease; }
.faq details[open] { background: linear-gradient(90deg, rgba(240, 214, 200, .35), transparent 70%); }
.faq summary { transition: color .3s ease, padding-left .35s ease; }
.faq summary:hover { padding-left: .5rem; }
.faq__a { overflow: hidden; }

/* Encerramento: círculos se expandindo */
.closing__shape { animation: spinRing 40s linear infinite; border-style: dashed; }
.closing__shape--2 { width: 460px; height: 460px; border-style: solid; border-color: rgba(210, 142, 114, .4); animation: breathe 6s ease-in-out infinite; }
.closing__shape--3 { width: 860px; height: 860px; border-color: rgba(136, 43, 6, .12); border-style: solid; animation: breathe 8s ease-in-out 1s infinite; }
@keyframes spinRing { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes breathe { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: 1.08; opacity: .4; } }

/* Botão fixo entrando com leve impulso */
.sticky-cta.is-visible { transition: transform .5s cubic-bezier(.3,1.4,.5,1), visibility 0s; }

/* ---------- Animações desligadas ----------
   Só vale quando CONFIG.animations = "respeitar" no script.js
   e o aparelho do visitante pede movimento reduzido. */
.motion-off *, .motion-off *::before, .motion-off *::after {
  animation: none !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
.motion-off [data-rv], .motion-off .hero h1 .w, .motion-off .hero__lead, .motion-off .hero__actions, .motion-off .hero .tag,
.motion-off .hero__cover figcaption, .motion-off .hero__cover picture {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
}
.motion-off .toc::before { transform: none !important; }
.motion-off .hero__dots, .motion-off .hero__cover-ring, .motion-off .closing__shape--2, .motion-off .closing__shape--3 { display: none; }