/* Mais Tetê · landing de afiliado · layout rosado (v2)
   Tema claro fixo. Rosa chapado, vinho no texto, fios finos, um canto grande nas fotos
   e a régua dos 14 dias como assinatura. Hero sobre a arte malva da Tatyane.
   Títulos: Bricolage Grotesque. Texto: Figtree. */

:root {
  color-scheme: only light;

  --bg: #FFF5F7;
  --surface: #FFFFFF;
  --blush: #FCE4EA;
  --blush-2: #F6CBD6;

  --ink: #3A1426;
  --text: #5A3547;
  --muted: #7E5A6B;

  --rose: #C8386B;
  --rose-h: #AE2C5A;
  --rose-soft: #EFA9BD;
  --rose-claro: #FFD7E2;

  /* malva medido na arte do hero */
  --malva: #9F5670;
  --malva-2: #8B4862;

  --line: rgba(58, 20, 38, .12);
  --line-strong: rgba(58, 20, 38, .26);

  --ph-bg: #F9DCE4;
  --ph-line: rgba(58, 20, 38, .2);
  --ph-text: #7E5A6B;

  --f-title: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --h1: clamp(2rem, min(3vw + 1rem, 7.4vh), 3.5rem);
  --h2: clamp(1.625rem, min(1.9vw + 1rem, 5.4vh), 2.5rem);
  --pad: clamp(3.75rem, 11vh, 7rem);
  --topo: 54px;
  --r-sm: 8px;
  --raio: 14px;
  --canto: 96px;
  --container: 1140px;
  --gut: 1rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 640px) {
  :root { --gut: max(1.5rem, calc((100vw - var(--container)) / 2)); }
}

/* notebook e desktop: tudo um pouco menor (tela larga e baixa) */
@media (min-width: 1024px) {
  :root { --topo: 62px; --canto: 150px; }
  html { font-size: 15px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  html { font-size: 14px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo) + 16px);
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
s { text-decoration-thickness: 1px; }

/* destaque de título: contraste de peso e cor, nunca de fonte */
.leve { font-weight: 300; color: var(--rose); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.pular {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.pular:focus { top: 1rem; }

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
@media (min-width: 640px) {
  .container { width: min(100% - 3rem, var(--container)); }
}

/* o canto grande: a forma que se repete nas fotos da página */
.canto-a { border-radius: var(--canto) var(--raio) var(--raio) var(--raio); }
.canto-b { border-radius: var(--raio) var(--canto) var(--raio) var(--raio); }

/* ---------- seções ---------- */
.sec { padding-block: var(--pad); }
.sec--blush { background: var(--blush); }
.sec--branca { background: var(--surface); }
.sec--rosa { background: var(--rose); color: #fff; }

.head {
  display: grid;
  gap: .875rem;
  align-content: start;
  max-width: 46rem;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}
.head--larga { max-width: 54rem; }
.head--curta { gap: .5rem; margin-bottom: 1.5rem; }

.eyebrow {
  display: flex;
  align-items: center;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
}
.eyebrow > .ico { width: 1rem; height: 1rem; margin-right: .5rem; }

.h2 { font-size: var(--h2); }

.lead {
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
  color: var(--muted);
  max-width: 58ch;
}

.subtitulo { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }
.nota { font-size: .875rem; color: var(--muted); }

.acao {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .875rem;
  color: var(--muted);
}
.selos li { display: inline-flex; align-items: center; gap: .4375rem; }
.selos .ico { width: 1.0625rem; height: 1.0625rem; color: var(--rose); }

/* ---------- botões ---------- */
.btn {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: var(--h);
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 600 1rem/1.25 var(--f-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, opacity .3s, visibility .3s;
}
.btn--cta { background: var(--rose); color: #fff; }
.btn--cta:hover { background: var(--rose-h); }
.btn--claro { background: #fff; color: var(--ink); }
.btn--claro .ico--seta { color: var(--rose); }
.btn--claro:hover { background: #FFE8EE; }
.btn--linha { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.btn--linha:hover { border-color: var(--ink); }
.btn--lg { --h: 56px; font-size: 1.0625rem; padding-inline: 1.375rem; }
.btn--sm { --h: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.btn--bloco { width: 100%; }
.btn .ico--seta { transition: transform .2s var(--ease); }
.btn:hover .ico--seta { transform: translateX(3px); }

.link-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.link-acao .ico { color: var(--rose); }
.link-acao:hover { text-decoration-color: currentColor; }

/* ---------- caixa de imagem ----------
   <figure class="midia" style="--r:4/5"> com um <img>, <video> ou <iframe> dentro:
   a mídia ocupa a caixa inteira. Vazia, mostra o aviso de data-ph. */
.midia {
  position: relative;
  aspect-ratio: var(--r, 4/3);
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--ph-bg);
}
.midia.canto-a { border-radius: var(--canto) var(--raio) var(--raio) var(--raio); }
.midia.canto-b { border-radius: var(--raio) var(--canto) var(--raio) var(--raio); }
.midia > img,
.midia > video,
.midia > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.midia:not(:has(> img, > video, > iframe)) { outline: 1px dashed var(--ph-line); outline-offset: -1px; }
.midia:not(:has(> img, > video, > iframe))::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-size: .8125rem;
  line-height: 1.35;
  text-align: center;
  color: var(--ph-text);
}

/* vídeo do YouTube que só carrega no clique */
.yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--ph-bg);
  cursor: pointer;
}
.yt.canto-a { border-radius: var(--canto) var(--raio) var(--raio) var(--raio); }
.yt > img,
.yt > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transition: transform .5s var(--ease);
}
.yt:hover > img { transform: scale(1.03); }
/* play no canto: as capas têm texto no meio (título do vídeo, nome da aluna) */
.yt__play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--rose);
  transition: transform .3s var(--ease);
}
.yt__play .ico { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; stroke: none; }
.duo--video .yt__play { right: 20px; bottom: 20px; width: 64px; height: 64px; }
.duo--video .yt__play .ico { width: 22px; height: 22px; }
.yt:hover .yt__play { transform: scale(1.08); }
.yt.is-tocando { border-radius: var(--raio); cursor: default; background: #000; }

/* ---------- topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
          backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.topo.is-rolado { border-bottom-color: var(--line); }
.topo__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--topo);
}
.topo__logo { display: block; flex: none; }
.topo__logo img { height: 40px; width: auto; }
.topo .logo-branca { display: none; }
.topo__nav { display: none; }
.topo .btn { margin-left: auto; }

/* sobre a arte do hero: transparente, logo branca e menu claro, até a página rolar */
.js .topo--sobre:not(.is-rolado) {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.js .topo--sobre:not(.is-rolado) .logo-cor { display: none; }
.js .topo--sobre:not(.is-rolado) .logo-branca { display: block; }

@media (max-width: 1023.98px) {
  .com-barra .topo .btn { opacity: 0; visibility: hidden; }
}
@media (min-width: 1024px) {
  .topo__logo img { height: 46px; }
  .topo__nav { display: flex; gap: 2rem; margin-left: 2.5rem; }
  .topo__nav a {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
  }
  .topo__nav a:hover { color: var(--ink); }
  .js .topo--sobre:not(.is-rolado) .topo__nav a { color: rgba(255, 255, 255, .88); }
  .js .topo--sobre:not(.is-rolado) .topo__nav a:hover { color: #fff; }
}

/* ---------- hero ----------
   Celular e tablet: a arte fica no alto e se funde ao malva; o texto sobe por cima da fusão.
   Desktop: a arte cobre o hero inteiro e o texto ocupa a área malva, à esquerda. */
.hero {
  position: relative;
  margin-top: calc(var(--topo) * -1);
  padding-bottom: clamp(2.5rem, 7vh, 4rem);
  overflow: hidden;
  background: linear-gradient(var(--malva), var(--malva-2));
  color: #fff;
}
.hero__arte {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 56svh;
  -webkit-mask-image: linear-gradient(#000 52%, transparent 97%);
          mask-image: linear-gradient(#000 52%, transparent 97%);
}
.hero__arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero__in { position: relative; z-index: 2; margin-top: -5.5rem; }
.hero__txt { display: grid; gap: 1rem; align-content: start; }
.hero .eyebrow { color: var(--rose-claro); }
.hero h1 { font-size: var(--h1); line-height: 1.06; color: #fff; }
.hero .leve { color: var(--rose-claro); }
.hero__sub {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: rgba(255, 255, 255, .92);
  max-width: 54ch;
}
.hero__ctas { display: grid; gap: .25rem; margin-top: .375rem; }
.hero .link-acao { color: #fff; }
.hero .link-acao .ico { color: var(--rose-claro); }
.hero__preco { font-size: .9375rem; color: rgba(255, 255, 255, .85); }
.hero__preco strong { color: #fff; font-weight: 600; }
.junto { display: block; white-space: nowrap; }
.junto .ponto { display: none; }
.ponto {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-inline: .5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
}

@media (min-width: 640px) {
  .junto { display: inline; }
  .junto .ponto { display: inline-block; }
  .hero__arte { aspect-ratio: 4 / 3; max-height: 60svh; }
  .hero__arte img { object-position: right top; }
  .hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
  .hero__txt { max-width: 36rem; }
}
@media (min-width: 1024px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: min(100svh, 50vw, 820px);
    padding-block: calc(var(--topo) + 1.5rem) 2.5rem;
    background: var(--malva);
  }
  .hero__arte {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* véu malva só do lado do texto, para o branco ler bem por cima da textura */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(112, 50, 80, .5) 0%, rgba(112, 50, 80, .32) 32%, rgba(112, 50, 80, 0) 56%);
    pointer-events: none;
  }
  .hero__in { margin-top: 0; }
  .hero .leve { display: block; }
  /* a Tatyane começa em 44% da largura: o texto nunca passa disso */
  .hero__txt { max-width: min(31rem, calc(44vw - var(--gut))); }
}
/* notebook baixo: o hero inteiro (com a régua) cabe na primeira tela, e a fileira de módulos também */
@media (min-width: 1024px) and (max-height: 720px) {
  .modulos-sec .lead { display: none; }
  .modulos-sec .head { margin-bottom: 1.25rem; }
  .modulos__barra { margin-top: 1rem; }
  .hero { padding-block: calc(var(--topo) + .5rem) 1.25rem; }
  .hero__txt { gap: .75rem; }
  .regua { margin-top: .25rem; }
}

/* régua dos 14 dias */
.regua {
  --regua-fio: rgba(255, 255, 255, .45);
  --regua-off: #C795AB;
  --regua-on: #FFFFFF;
  max-width: 30rem;
  margin-top: .75rem;
}
.regua__trilho {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
}
.regua__trilho::before,
.regua__fio {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: var(--regua-fio);
}
.regua__fio {
  height: 2px;
  margin-top: -1px;
  background: var(--regua-on);
  transform-origin: left;
}
.regua__trilho i {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--regua-on);
}
.regua__trilho i.is-marco { width: 14px; height: 14px; }
.regua__marcos {
  position: relative;
  height: 2.5rem;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .85);
}
.regua__marcos li { position: absolute; top: 0; display: grid; white-space: nowrap; }
.regua__marcos li:nth-child(1) { left: 0; }
.regua__marcos li:nth-child(2) { left: calc(7px + (100% - 14px) * .4615); translate: -50% 0; text-align: center; }
.regua__marcos li:nth-child(3) { right: 0; text-align: right; }
.regua__marcos strong { color: #fff; font-weight: 600; }

/* ---------- números ---------- */
.numeros { background: var(--surface); border-bottom: 1px solid var(--line); }
.numeros__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numero {
  display: grid;
  gap: .25rem;
  align-content: center;
  padding: 1.5rem .5rem;
  text-align: center;
}
.numero strong {
  font: 600 clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem)/1 var(--f-title);
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.numero > span { font-size: .875rem; color: var(--muted); line-height: 1.35; }
.numero:nth-child(odd) { border-right: 1px solid var(--line); }
.numero:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .numeros__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numero { padding: 2.25rem 1rem; }
  .numero:nth-child(-n+2) { border-bottom: 0; }
  .numero:nth-child(odd) { border-right: 0; }
  .numero:not(:last-child) { border-right: 1px solid var(--line); }
}

/* ---------- hoje e depois ---------- */
.pares { border-top: 1px solid var(--line-strong); }
.pares__cab {
  display: flex;
  gap: .5rem 1.5rem;
  flex-wrap: wrap;
  padding-block: .875rem;
  border-bottom: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pares__cab span:nth-child(2) { display: none; }
.pares__cab span:last-child { color: var(--rose); }

.par {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--line);
}
.par p {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.par .ico { width: 1.125rem; height: 1.125rem; margin-top: .2em; stroke-width: 2.2; }
.par__hoje { font-size: .9375rem; color: var(--muted); }
.par__hoje .ico { color: var(--rose-soft); }
.par__depois { font-weight: 600; color: var(--ink); }
.par__depois .ico { color: var(--rose); }

/* fio que liga o "hoje" ao "depois": em pé no celular, deitado no desktop */
.par__fio {
  --p: 1;
  position: relative;
  width: 1px;
  height: 14px;
  margin: .25rem 0 .25rem 9px;
}
.par__fio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rose-soft);
  transform: scaleY(var(--p));
  transform-origin: top;
}
@media (min-width: 1024px) {
  .pares__cab,
  .par {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr);
    gap: 0 2rem;
    align-items: center;
  }
  .pares__cab span:nth-child(2) { display: block; }
  .par { padding-block: 1.25rem; }
  .par__hoje { font-size: 1rem; }
  .par__depois { font-size: 1.0625rem; }
  .par__fio { width: auto; height: 1px; margin: 0; }
  .par__fio::before { transform: scaleX(var(--p)); transform-origin: left; }
  .par__fio::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--rose);
    border-right: 1px solid var(--rose);
    rotate: 45deg;
    opacity: var(--p);
  }
}

.virada {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  margin-top: clamp(2.5rem, 7vh, 4rem);
}
.virada p {
  font: 500 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.35 var(--f-title);
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 34ch;
}
@media (min-width: 1024px) {
  .virada { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}

/* ---------- blocos de duas colunas (vídeo, Tatyane) ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.duo .head { margin-bottom: 0; }
.duo__acao { display: grid; gap: 1rem; justify-items: start; margin-top: .75rem; }
@media (min-width: 1024px) {
  .duo { gap: clamp(3rem, 6vw, 5rem); }
  .duo--video { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .duo--autora { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* ---------- método: colunas com fio ---------- */
.passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.passo {
  --p: 1;
  position: relative;
  display: grid;
  gap: .75rem;
  align-content: start;
  padding-block: 1.75rem;
}
.passo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(var(--p));
  transform-origin: left;
}
.passo__n {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font: 600 .8125rem/1 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose);
}
.passo__n .ico { width: 1rem; height: 1rem; }
.passo__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--rose);
}
.passo h3 { font-size: 1.3125rem; }
.passo p { color: var(--muted); }
@media (min-width: 1024px) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .passo { padding-block: 2rem 0; }
}

/* ---------- bônus: painel em vinho, o único bloco escuro da página ----------
   Desktop: três cartões lado a lado. Celular: os cartões grudam no alto e se empilham ao rolar.
   O preço de cada um é riscado (--r vai de 0 a 1) e entra o selo "Incluso hoje". */
.bonus-painel {
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--ink);
  color: rgba(255, 255, 255, .86);
}
.bonus__cab { display: grid; gap: 1.5rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.bonus__cab-txt { display: grid; gap: .75rem; align-content: start; padding-right: 1.5rem; }
.bonus-painel .eyebrow { color: var(--rose-claro); }
.bonus-painel .subtitulo { color: #fff; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.bonus-painel .leve { color: var(--rose-claro); }
.bonus__lead { max-width: 52ch; }

.risco { position: relative; white-space: nowrap; }
.risco::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 54%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(var(--r, 1));
  transform-origin: left;
}

.bonus__selo {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .75rem;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font: 600 .8125rem/1.2 var(--f-body);
  white-space: nowrap;
}
.bonus__selo .ico { width: .9375rem; height: .9375rem; stroke-width: 2.4; }

.bonus__total {
  display: grid;
  gap: .5rem;
  justify-items: start;
  align-content: center;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.bonus__total-rot {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.bonus__total-de {
  font: 600 clamp(2.25rem, 1.8rem + 2vw, 3rem)/1 var(--f-title);
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.bonus__total-de .risco::after { height: 3px; background: var(--rose-soft); }
.bonus__total .bonus__selo { background: #fff; color: var(--rose-h); white-space: normal; }

.bonus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bonus__item {
  --canto: 44px;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  border-radius: var(--canto) var(--raio) var(--raio) var(--raio);
  background: var(--surface);
  color: var(--text);
}
.bonus__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.bonus__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--rose);
}
.bonus__ico .ico { width: 26px; height: 26px; }
.bonus__tag {
  font: 600 .75rem/1.2 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose);
  text-align: right;
}
.bonus__item h4 { font-size: 1.3125rem; }
.bonus__item > p { color: var(--muted); }
.bonus__item > .bonus__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .625rem 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.bonus__de .risco { margin-left: .25rem; color: var(--ink); font-weight: 600; }

.bonus__acao { display: grid; gap: .875rem; justify-items: start; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.bonus__acao p { font-size: .875rem; color: rgba(255, 255, 255, .78); }

/* celular e tablet: pilha de cartões (cada um gruda um pouco abaixo do anterior) */
@media (max-width: 1023.98px) {
  .js .bonus { display: block; }
  .js .bonus__item {
    position: sticky;
    top: calc(var(--topo) + .75rem + var(--i, 0) * .875rem);
    min-height: 19rem;
    margin-bottom: 1rem;
    transform-origin: center top;
    box-shadow: 0 -14px 28px -18px rgba(0, 0, 0, .55);
  }
  .js .bonus__item:nth-child(2) { --i: 1; }
  .js .bonus__item:nth-child(3) { --i: 2; margin-bottom: 0; }
  .bonus__acao .btn { width: 100%; font-size: 1rem; padding-inline: .75rem; gap: .5rem; }
  .bonus-painel .subtitulo .leve { display: block; }
}
@media (min-width: 1024px) {
  .bonus__cab { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
  .bonus__total { padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); border-top: 0; border-left: 1px solid rgba(255, 255, 255, .18); }
  .bonus__total .bonus__selo { white-space: nowrap; }
  .bonus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .bonus__item { --canto: 56px; padding: 1.75rem; }
  .bonus__acao { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; }
}

/* ---------- os 14 dias ---------- */
.jornada { display: grid; grid-template-columns: minmax(0, 1fr); }
.jornada__head .nota { margin-top: .25rem; }
.trilha { position: relative; }
.trilha__fio {
  position: absolute;
  left: 11px;
  top: var(--fio-top, 18px);
  width: 2px;
  height: var(--fio-h, calc(100% - 8rem));
  background: var(--blush-2);
}
.trilha__fio i {
  position: absolute;
  inset: 0;
  background: var(--rose);
  transform-origin: top;
}
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: .375rem 1.25rem;
  padding-bottom: 2.5rem;
}
.etapa:last-child { padding-bottom: 0; }
.etapa__ponto {
  grid-row: 1;
  width: 16px;
  height: 16px;
  margin: 10px 0 0 4px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 5px var(--blush);
}
.etapa__dia {
  font: 600 2.25rem/1 var(--f-title);
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.etapa__dia small { margin-right: .2em; font-size: inherit; font-weight: 300; color: var(--rose); }
.etapa--meta .etapa__dia { color: var(--rose); }
.etapa__txt { grid-column: 2; display: grid; gap: .375rem; max-width: 34rem; }
.etapa__txt h3 { font-size: 1.1875rem; }
.etapa__txt p { color: var(--muted); }
@media (min-width: 1024px) {
  .jornada { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
  .jornada__head { position: sticky; top: calc(var(--topo) + 2.5rem); margin-bottom: 0; }
  .etapa { grid-template-columns: 24px 9.5rem minmax(0, 1fr); gap: 0 1.5rem; padding-bottom: 3.5rem; }
  .etapa__dia { font-size: 2.75rem; }
  .etapa__ponto { margin-top: 13px; }
  .etapa__txt { grid-column: 3; padding-top: .5rem; }
}

/* ---------- trilho com rolagem lateral ---------- */
.rolagem {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  margin-inline: calc(var(--gut) * -1);
  padding: 0 var(--gut) .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  scrollbar-width: none;
}
.rolagem::-webkit-scrollbar { display: none; }
.rolagem > * { scroll-snap-align: start; min-width: 0; }

/* ---------- módulos ---------- */
.modulos-sec { overflow: hidden; }
.modulos-sec .head { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.modulos__janela {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  scrollbar-width: none;
}
.modulos__janela::-webkit-scrollbar { display: none; }
.modulos {
  --mod-w: max(150px, 42vw);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--mod-w);
  gap: 1rem;
  width: max-content;
  padding-inline: var(--gut);
}
.modulo {
  --canto: 44px;
  display: grid;
  gap: .5rem;
  align-content: start;
  scroll-snap-align: start;
  min-width: 0;
}
.modulo .midia { margin-bottom: .25rem; }
.modulo__n {
  font: 600 .75rem/1 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose);
}
.modulo h3 { font: 600 .9375rem/1.35 var(--f-body); letter-spacing: 0; }
.modulo__fim {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  aspect-ratio: 4 / 5;
  padding: 1.5rem 1.125rem 1.125rem;
  background: var(--rose);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s;
}
.modulo__fim:hover { background: var(--rose-h); }
.modulo__fim .modulo__n { color: var(--rose-claro); margin-top: 1.25rem; }
.modulo__fim strong { font: 600 1.0625rem/1.25 var(--f-title); letter-spacing: -.01em; }
.modulo__cta { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; }
.modulos__barra { height: 2px; margin-top: clamp(1.5rem, 4vh, 2.25rem); background: var(--line); }
.modulos__barra i {
  display: block;
  height: 100%;
  background: var(--rose);
  transform: scaleX(.06);
  transform-origin: left;
}
@media (min-width: 640px) {
  .modulos { --mod-w: 200px; }
}
@media (min-width: 1024px) {
  .modulos { --mod-w: clamp(160px, 31vh, 300px); gap: 1.25rem; }
  .modulo h3 { font-size: 1rem; }
  .modulo { --canto: 56px; }
  .modulos__janela { scroll-snap-type: none; }
}
/* quando o GSAP prende a seção (celular e desktop), a fileira anda pela rolagem vertical */
.is-pin .modulos__janela { overflow: hidden; scroll-snap-type: none; }
.is-pin .modulos { will-change: transform; }
/* celular baixo: menos texto para o palco caber na tela e poder prender */
@media (max-width: 1023.98px) and (max-height: 740px) {
  .modulos-sec .lead { display: none; }
}

/* ---------- o que você recebe: vitrine ----------
   Com as animações ligadas (.js): palco parado que troca de imagem conforme o item da lista.
   Sem elas: o palco some e cada item mostra a própria imagem. */
.vitrine { display: block; }
.vitrine__palco { display: none; }
.js .vitrine__palco {
  display: block;
  position: sticky;
  top: var(--topo);
  z-index: 3;
  padding-block: .75rem .875rem;
  background: var(--blush);
}
/* o texto some com suavidade ao passar por baixo do palco */
.js .vitrine__palco::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  background: linear-gradient(var(--blush), transparent);
  pointer-events: none;
}
.vitrine__caixa {
  --canto: 72px;
  position: relative;
  height: min(34svh, 270px);
  overflow: hidden;
  background: var(--surface);
}
.vitrine__caixa img {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.vitrine__caixa img.is-ativa { opacity: 1; transform: none; }
.vitrine__barra { height: 2px; margin-top: .75rem; background: var(--line); }
.vitrine__barra i {
  display: block;
  height: 100%;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
}
.js .item__img { display: none; }
/* o item da vez fica em destaque; os outros recuam */
.js .item { opacity: .4; transition: opacity .4s var(--ease); }
.js .item.is-ativa { opacity: 1; }
.js .item.is-ativa .item__txt h3 { color: var(--rose); }
.js .vitrine__lista { padding-top: .5rem; }
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-strong);
}
.item__img {
  grid-column: 1 / -1;
  --canto: 72px;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
}
/* mídia absoluta: height 100% não resolve dentro de caixa que só tem proporção */
.item__img img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.item__txt { display: grid; gap: .5rem; }
.item__txt h3 { font-size: 1.25rem; transition: color .3s; }
.item__txt p { color: var(--muted); }
.item__txt .item__valor { margin-top: .25rem; font-size: .875rem; }
.item__valor strong { margin-left: .375rem; color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) {
  /* desktop: palco ao lado da lista (grade de duas colunas só com as animações ligadas) */
  .js .vitrine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  .js .vitrine__palco { top: calc(var(--topo) + 2rem); padding: 0; background: transparent; }
  .js .vitrine__palco::after { display: none; }
  .vitrine__caixa { --canto: 150px; height: min(64svh, 480px); }
  .vitrine__barra { display: none; }
  .js .vitrine__lista { padding-top: 0; }
  .js .item { opacity: 1; }
  .item { padding-block: 2.25rem; }
  .item__img { max-width: 420px; }
  .item:last-child { border-bottom: 1px solid var(--line-strong); }
}

.aovivo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  margin-block: clamp(2.5rem, 7vh, 4.5rem);
  padding: 1.5rem;
  background: var(--surface);
}
.aovivo__img img { width: 100%; max-width: 360px; margin-inline: auto; }
.aovivo__txt { display: grid; gap: .75rem; }
.aovivo__txt h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.aovivo__txt p:last-child { color: var(--muted); }
@media (min-width: 1024px) {
  .aovivo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; padding: 2rem 3rem; }
}

/* ---------- Tatyane ---------- */
.autora__foto { width: 100%; max-width: 440px; }
.autora__txt { display: grid; gap: 1rem; align-content: start; }
.autora__txt > p:not(.eyebrow) { color: var(--muted); }
.credenciais { margin-top: .5rem; border-top: 1px solid var(--line-strong); }
.credenciais li {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
}
.credenciais .ico { color: var(--rose); }

/* ---------- depoimentos e prints ---------- */
.head-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.head-linha .head { margin-bottom: 0; }
.carrossel__nav { display: none; gap: .5rem; }
.carrossel.is-rolavel .carrossel__nav { display: flex; }
.seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.seta:hover:not(:disabled) { border-color: var(--ink); }
.seta:disabled { opacity: .35; cursor: default; }

.depos { grid-auto-columns: 84%; }
.prints { margin-top: clamp(3.5rem, 9vh, 5.5rem); }
.prints__grade { grid-auto-columns: 58%; }
.prints__grade .midia { background: #111; }
@media (min-width: 640px) {
  .depos { grid-auto-columns: 46%; }
  .prints__grade { grid-auto-columns: 34%; }
}
@media (min-width: 1024px) {
  .depos { grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); gap: 1.25rem; }
  .prints__grade {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
    margin-inline: 0;
    padding: 0 0 2rem;
    overflow: visible;
  }
  .prints__grade li:nth-child(even) { margin-top: 2rem; }
}

/* ---------- para quem é ---------- */
.paraquem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.coluna { padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.coluna h3 { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; font-size: 1.25rem; }
.lista { display: grid; }
.lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding-block: .875rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.lista .ico { width: 1.125rem; height: 1.125rem; margin-top: .22em; stroke-width: 2.2; }
.lista--sim .ico, .ico--sim { color: var(--rose); }
.lista--nao .ico, .ico--nao { color: var(--rose-soft); }
.coluna--nao .lista li { color: var(--muted); }
@media (min-width: 1024px) {
  .paraquem { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(3rem, 6vw, 5rem); }
}

/* ---------- oferta ---------- */
.conta {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.conta__img { --canto: 36px; }
.conta__txt { display: grid; gap: .5rem; }
.conta__txt h3 { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); }
.conta__txt p { color: var(--muted); max-width: 60ch; }
@media (min-width: 640px) {
  .conta { grid-template-columns: 132px minmax(0, 1fr); gap: 2rem; }
  .conta__img { --canto: 52px; }
}

.oferta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--raio);
}
.oferta__itens { padding: clamp(1.25rem, 4vw, 2.5rem); }
.oferta__mock { margin-bottom: 1.25rem; }
.oferta__mock img { width: 100%; max-width: 420px; margin-inline: auto; }
.oferta__itens h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.pilha li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: .8125rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .9375rem;
}
.pilha li:last-child { border-bottom: 0; }
.pilha__valor { color: var(--muted); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pilha__bonus { font-weight: 600; }
.pilha__bonus .pilha__valor { color: var(--rose); font-weight: 600; }

.oferta__preco {
  display: grid;
  gap: .5rem;
  align-content: center;
  justify-items: center;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--rose);
  color: #fff;
  border-radius: 0;
}
.preco__de { font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.preco__de s { font-size: 1rem; }
.preco__rotulo { margin-top: .75rem; font-weight: 500; }
.preco__valor {
  font: 600 clamp(2.75rem, 2.2rem + 2.4vw, 3.75rem)/1 var(--f-title);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.preco__valor small {
  display: inline-block;
  vertical-align: .6em;
  margin-right: .125rem;
  font: 500 1rem/1 var(--f-body);
  letter-spacing: 0;
  color: rgba(255, 255, 255, .85);
}
.preco__vista { margin-bottom: 1rem; color: rgba(255, 255, 255, .9); }
.preco__vista strong { color: #fff; font-weight: 600; }
.preco__nota { margin-top: .375rem; font-size: .8125rem; color: rgba(255, 255, 255, .9); }
.preco__nota .ico { display: inline-block; width: 1rem; height: 1rem; margin-right: .25rem; vertical-align: -3px; }
.pagamentos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.125rem;
  width: 100%;
  margin-top: .75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: .8125rem;
}
.pagamentos li { display: inline-flex; align-items: center; gap: .375rem; }
.pagamentos .ico { width: 1rem; height: 1rem; }
.preco__plataforma { font-size: .75rem; color: rgba(255, 255, 255, .85); }
@media (min-width: 1024px) {
  .oferta { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border-radius: var(--raio) var(--canto) var(--raio) var(--raio); }
}

.garantia {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--line-strong);
  text-align: center;
}
.selo7 {
  display: grid;
  place-content: center;
  width: 112px;
  height: 112px;
  border: 1px solid var(--rose);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px var(--blush), inset 0 0 0 7px var(--rose-soft);
  text-align: center;
  color: var(--ink);
}
.selo7 strong { font: 600 2.5rem/1 var(--f-title); }
.selo7 span { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; color: var(--muted); }
.garantia__txt { display: grid; gap: .625rem; justify-items: center; }
.garantia h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.garantia__txt > p:last-child { color: var(--muted); max-width: 70ch; }
@media (min-width: 640px) {
  .garantia { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: 2.5rem; text-align: left; align-items: center; }
  .garantia__txt { justify-items: start; }
}

/* ---------- dúvidas ---------- */
.duvidas { display: grid; grid-template-columns: minmax(0, 1fr); }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font: 600 1.0625rem/1.4 var(--f-title);
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--rose); transition: transform .3s var(--ease); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq summary:hover { color: var(--rose); }
.faq__resp { padding: 0 2.5rem 1.5rem 0; color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}
@media (min-width: 1024px) {
  .duvidas { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
  .duvidas__head { position: sticky; top: calc(var(--topo) + 2.5rem); margin-bottom: 0; }
}

/* ---------- chamada final ---------- */
.final__in { display: grid; justify-items: start; gap: 1.25rem; max-width: 46rem; margin-inline: auto; text-align: left; }
.final .h2 { color: #fff; }
.final .lead { color: rgba(255, 255, 255, .92); margin-bottom: .5rem; }
.final__micro { font-size: .875rem; color: rgba(255, 255, 255, .88); }
@media (min-width: 640px) {
  .final__in { justify-items: center; text-align: center; }
}

/* ---------- rodapé ---------- */
.rodape {
  padding: 3rem 0 2rem;
  background: var(--surface);
  color: var(--muted);
  font-size: .875rem;
}
.rodape__topo { display: grid; gap: 1.5rem; }
.rodape__logo { width: auto; height: 64px; }
.rodape__legal { display: grid; gap: .75rem; max-width: 70ch; }
.rodape__legal a { color: var(--ink); text-underline-offset: 3px; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .rodape__topo { grid-template-columns: auto minmax(0, 1fr); gap: 4rem; align-items: start; }
}
@media (max-width: 1023.98px) {
  .rodape { padding-bottom: 5.5rem; }
}

/* selo padrão da agência */
.footer__developer { display: inline-flex; align-items: center; gap: .625rem; margin: 0; }
.footer__developer-link { display: inline-flex; }
.footer__developer img { width: 78px; height: auto; opacity: .72; transition: opacity .2s, transform .2s; }
.footer__developer-link:hover img { opacity: 1; transform: scale(1.04); }

/* ---------- barra fixa do celular ---------- */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.barra.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.barra__preco { display: grid; line-height: 1.25; }
.barra__preco strong { font: 600 1.0625rem/1.2 var(--f-title); color: var(--ink); }
.barra__preco small { font-size: .75rem; color: var(--muted); }
@media (min-width: 1024px) {
  .barra { display: none; }
}

/* ---------- estado inicial das animações ----------
   Só vale com JS + GSAP carregados (a classe .js sai sozinha se algo falhar)
   e sem "reduzir movimento" no aparelho. */
.js [data-h],
.js [data-rv],
.js [data-rv-filho],
.js .par__hoje,
.js .par__depois,
.js .etapa__dia,
.js .etapa__txt,
.js .regua__marcos li,
.js [data-passo] > * { opacity: 0; }
.js [data-hero-arte] { opacity: 0; }
.js .par__fio,
.js [data-passo] { --p: 0; }
.js [data-bonus],
.js [data-selo] { opacity: 0; }
.js [data-risco] { --r: 0; }
.js [data-foto] { clip-path: inset(0 0 100% 0); }
.js .regua__fio { transform: scaleX(0); }
.js .regua__trilho i { background: var(--regua-off); }
.js .etapa__ponto { transform: scale(0); }
.js .trilha__fio i { transform: scaleY(0); }