/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom · enrichment: none (fotos reais do cliente)
 * nav: N9 edge-aligned minimal · footer: Ft2 inline single line · cta: C4 sticky bottom bar
 * vibe: "boutique sensual, vinho, discreta, noite elegante" · paper: oklch(97% 0.010 10) · accent: oklch(43% 0.142 3)
 * display: Marcellus · body: Commissioner · axes: light / roman-serif / warm · studied: no · context: inferred (conversa)
 * v2 (auditoria Hallmark + Impeccable): fotos de produto com tratamento único, lingerie em foto de ponta a ponta,
 * botões nas vitrines, CTA na seção blackout, fechamento em bloco vinho, vídeos em trilho deslizante no celular.
 * pre-emit critique: P4 H4 E4 S5 R4 V5
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; touch-action: manipulation; }
a, summary, button { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  padding-bottom: 5.5rem; /* espaço da barra fixa do WhatsApp no celular */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400; /* Marcellus só tem um peso — evita negrito sintético */
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.sem-quebra { white-space: nowrap; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.blackout :focus-visible,
.fechamento :focus-visible { outline-color: var(--color-focus-claro); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3.25rem;
  padding: 0 var(--space-xl);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: scale(0.97); }

/* claro: sobre fundo escuro ou vinho */
.btn--claro { background: var(--color-paper); color: var(--color-accent); }
.btn--claro:hover { background: var(--color-paper-2); }

/* linha: ação secundária das vitrines */
.btn--linha {
  min-height: 2.75rem;
  padding: 0 var(--space-lg);
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-sm);
}
.btn--linha:hover { background: var(--color-accent); color: var(--color-accent-ink); }

.link {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}
.link:hover { text-decoration-thickness: 2px; }

/* ---------- topo ---------- */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.topo img { width: 9.5rem; }
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--color-muted);
}
.status[data-aberto="true"]::before { background: var(--color-accent); }

/* ---------- campanha Grupo VIP (faixa escura no topo) ---------- */
.vip { background: var(--color-night); color: var(--color-night-ink); }
.vip-conteudo {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-xl);
}
.vip-diamante { width: 100%; mix-blend-mode: screen; /* fundo preto do ícone some no escuro */ }
.vip-rotulo { font-size: var(--text-sm); color: var(--color-night-muted); }
.vip h2 { margin-top: var(--space-2xs); font-size: var(--text-2xl); }
.vip h2 span { display: block; font-size: var(--text-lg); font-family: var(--font-body); font-weight: 500; color: var(--color-rose); margin-top: var(--space-2xs); }
.vip .btn { margin-top: var(--space-lg); }
.vip-nota { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-night-muted); }
.vip :focus-visible { outline-color: var(--color-focus-claro); }
@media (max-width: 30rem) {
  .vip-conteudo { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .vip .btn { width: 100%; }
}
@media (min-width: 52rem) {
  .vip-conteudo { grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: var(--space-xl); }
}

/* ---------- abertura ---------- */
.abertura {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-xl) var(--space-3xl);
}
.abertura h1 { font-size: var(--text-display); letter-spacing: -0.015em; }
.abertura h1 span { display: block; color: var(--color-accent); }
.abertura .lead {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink-2);
  max-width: 34ch;
}
.abertura .acoes {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
}
@media (max-width: 30rem) {
  .abertura .acoes .btn { flex: 1 1 100%; }
  .btn { padding-inline: var(--space-lg); }
}
.abertura .nota {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
  max-width: 44ch;
}
.abertura .campanha { position: relative; }
/* vídeo 9:16 recortado em 4:5 pelo centro: preserva a legenda gravada (≈75% da altura) e a data no alto */
.abertura .campanha video { object-position: center; }
.abertura .campanha .som { top: var(--space-sm); bottom: auto; } /* embaixo bateria na legenda do vídeo */
.abertura figure img,
.abertura figure video {
  display: block;
  width: 100%;
  height: auto; /* sem isso a altura do atributo do <video> vence o aspect-ratio */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-sm);
}
@media (min-width: 52rem) {
  .abertura {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    padding-block: var(--space-2xl) var(--space-4xl);
  }
}

/* ---------- faixa de garantias ---------- */
.garantias { border-block: var(--rule-hair) solid var(--color-rule); }
.garantias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.garantias li {
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-ink-2);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.garantias li:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-rule); padding-left: 0; }
.garantias li:nth-last-child(-n+2) { border-bottom: 0; }
.garantias b { display: block; color: var(--color-ink); font-weight: 600; }
@media (min-width: 52rem) {
  .garantias ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* inclui :nth-child(odd) pra vencer o padding-left: 0 do celular, que empurrava o 3º item pra borda */
  .garantias li,
  .garantias li:nth-child(odd) { border-bottom: 0; border-right: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
  .garantias li:first-child { padding-left: 0; }
  .garantias li:last-child { border-right: 0; }
}

/* ---------- entrega — título grande, sem parágrafo de intro ---------- */
.entrega { padding-block: var(--space-3xl) var(--space-4xl); }
.entrega-sub { font-size: var(--text-2xl); margin-top: var(--space-3xl); }

/* bloco do motoboy (arte do banner do Cris + texto real) */
.motoboy { display: grid; gap: var(--space-lg); align-items: center; }
.motoboy-arte img { width: 100%; max-width: 22rem; margin-inline: auto; mix-blend-mode: multiply; /* fundo branco da arte some no papel rosado */ }
.motoboy h2 { font-size: var(--text-3xl); }
.motoboy h2 span { color: var(--color-accent); }
.motoboy-texto > p:first-of-type { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 48ch; }
.checks { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.checks li { display: flex; align-items: flex-start; gap: var(--space-sm); font-weight: 500; }
.checks li::before {
  content: "";
  flex: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf5f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}
.motoboy .btn { margin-top: var(--space-xl); }
.asterisco { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); max-width: 52ch; }
@media (max-width: 30rem) {
  .motoboy-arte img { max-width: 15rem; }
  .motoboy .btn { width: 100%; }
}
@media (min-width: 52rem) {
  .motoboy { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); }
  .motoboy-arte img { max-width: 100%; }
}
.entregas {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-top: var(--rule-hair) solid var(--color-ink);
}
.entregas li {
  display: grid;
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.entregas h4 { font-size: var(--text-xl); }
.entregas p { color: var(--color-ink-2); max-width: 52ch; }
.entregas .preco { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
@media (min-width: 52rem) {
  .entregas li { grid-template-columns: 16rem minmax(0, 1fr) auto; align-items: baseline; }
}
.cidades {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 60ch;
}

/* ---------- blackout (seção escura) ---------- */
.blackout { background: var(--color-night); color: var(--color-night-ink); }
.blackout .wrap {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-4xl);
}
.blackout h2 { font-size: var(--text-display); }
.blackout p {
  margin-top: var(--space-lg);
  color: var(--color-night-muted);
  max-width: 40ch;
  font-size: var(--text-lg);
  line-height: 1.5;
}
.blackout .btn { margin-top: var(--space-xl); }
@media (min-width: 52rem) {
  .blackout .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* carrossel da embalagem — desliza com o dedo, pontos indicam a posição */
.carrossel { min-width: 0; }
.carrossel-trilho {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-sm);
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 4 / 5;
  background: var(--color-night-2);
}
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* arte quadrada num slide 4:5: mostra inteira (sem cortar os textos das laterais) sobre o mesmo preto da arte */
.slide--quadrada { background: var(--color-foto-preto); }
.slide--quadrada img { object-fit: contain; }
.carrossel-pontos { display: flex; justify-content: center; gap: var(--space-2xs); margin-top: var(--space-sm); }
.carrossel-pontos button {
  width: 2.75rem; height: 2.75rem; /* área de toque de 44px, ponto visível pequeno */
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.carrossel-pontos button::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill);
  background: var(--color-night-rule);
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.carrossel-pontos button[aria-current="true"]::before { width: 1.5rem; background: var(--color-night-ink); }

/* botão de som sobre os vídeos */
.som {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-scrim);
  color: var(--color-night-ink);
  font: 500 var(--text-xs) / 1 var(--font-body);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.som:active { transform: scale(0.95); }
.som[aria-pressed="true"] { background: var(--color-accent); }

/* placeholder de mídia pendente — deixa claro que é espaço reservado */
.pendente {
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  aspect-ratio: 4 / 5;
  border: var(--rule-hair) dashed var(--color-placeholder-ink);
  border-radius: var(--radius-sm);
  background: var(--color-placeholder);
  color: var(--color-placeholder-ink);
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.4;
}
.pendente b { display: block; font-weight: 600; color: var(--color-ink-2); }
.blackout .pendente {
  background: var(--color-night-2);
  border-color: var(--color-night-rule);
  color: var(--color-night-muted);
}
.blackout .pendente b { color: var(--color-night-ink); }

/* ---------- avaliações (carrossel de depoimentos) ---------- */
.avaliacoes { padding-block: var(--space-3xl); }
.avaliacoes h2 { font-size: var(--text-2xl); max-width: 18ch; }
.avaliacoes .intro { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 44ch; }
.avaliacoes .carrossel { margin-top: var(--space-xl); }
.avaliacoes .link { display: inline-block; margin-top: var(--space-md); }
.carrossel--claro .carrossel-trilho { gap: var(--space-sm); scroll-padding-inline: 0; }
.depoimento {
  flex: 0 0 86%;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-sm);
}
.depoimento .estrelas { color: var(--color-accent); letter-spacing: 0.15em; font-size: var(--text-sm); }
.depoimento blockquote { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--color-ink); }
.depoimento figcaption { margin-top: auto; font-size: var(--text-sm); color: var(--color-muted); }
/* espaço reservado até chegarem os textos reais */
.pendente-card { border: var(--rule-hair) dashed var(--color-placeholder-ink); background: var(--color-placeholder); }
.pendente-card .estrelas, .pendente-card blockquote { color: var(--color-placeholder-ink); }
.carrossel--claro .carrossel-pontos button::before { background: var(--color-rule); }
.carrossel--claro .carrossel-pontos button[aria-current="true"]::before { background: var(--color-accent); }
@media (min-width: 52rem) {
  .depoimento { flex-basis: calc((100% - 2 * var(--space-sm)) / 3); }
}

/* ---------- lingerie — foto de ponta a ponta ---------- */
.lingerie { background: var(--color-paper-2); }
.lingerie figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}
.lingerie-texto {
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}
.lingerie h2 { font-size: var(--text-3xl); max-width: 13ch; }
.lingerie p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 38ch; }
.lingerie .btn { margin-top: var(--space-xl); }
@media (min-width: 52rem) {
  .lingerie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .lingerie figure img { aspect-ratio: auto; height: 100%; max-height: 46rem; }
  .lingerie-texto { padding: var(--space-3xl) max(var(--space-lg), calc((100vw - 68rem) / 2 + var(--space-lg))) var(--space-3xl) var(--space-4xl); }
}

/* ---------- vitrine de produtos ---------- */
.produtos { padding-block: var(--space-4xl) var(--space-3xl); }
.produtos h2 { font-size: var(--text-2xl); max-width: 16ch; }
.grade {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
}
.grade li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.grade li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.grade figure {
  background: var(--color-paper-2);
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.grade figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* o fundo branco da foto vira o rosado do card */
}
.grade figure img { transition: transform var(--dur-slow) var(--ease-out); }
.grade li:hover figure img,
.grade li:active figure img { transform: scale(1.05); }
.grade h3 { font-size: var(--text-xl); }
.grade p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.grade .btn { margin-top: var(--space-sm); }
.link-site {
  display: inline-block;
  margin-top: var(--space-xs);
  margin-left: var(--space-sm);
  padding-block: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-underline-offset: 0.25em;
  white-space: nowrap;
}
.link-site:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.lingerie .link-site { margin-left: var(--space-md); }
@media (max-width: 24rem) {
  .grade li { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-md); }
  .grade .btn--linha { padding-inline: var(--space-md); }
}
@media (max-width: 30rem) {
  .grade .link-site,
  .lingerie .link-site { display: block; margin-left: 0; margin-top: var(--space-2xs); }
}
.nota-grade { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 52rem) {
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
  .grade li { grid-template-columns: 1fr; align-items: start; padding-block: 0; border: 0; }
  .grade li:last-child { border: 0; }
}

/* ---------- loja por dentro ---------- */
.loja { background: var(--color-paper-2); padding-block: var(--space-3xl); }
.loja h2 { font-size: var(--text-2xl); }
.loja .intro { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 44ch; }

/* no celular os vídeos deslizam de lado, como stories */
.videos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 58%;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-inline: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-lg);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.videos::-webkit-scrollbar { display: none; }
.videos .midia {
  position: relative;
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-placeholder);
}
.videos .midia img, .videos .midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.videos .som { right: var(--space-xs); bottom: var(--space-xs); padding: 0 var(--space-sm); }
@media (min-width: 52rem) {
  .videos {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 13rem));
    justify-content: start;
    max-width: 68rem;
    margin-inline: auto;
    overflow: visible;
  }
}

.endereco { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
.mapa {
  margin-top: var(--space-2xl);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-placeholder);
  aspect-ratio: 4 / 3;
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapa + .btn { margin-top: var(--space-lg); }
@media (min-width: 52rem) { .mapa { aspect-ratio: 21 / 9; } }
.endereco dt { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.endereco dd { color: var(--color-ink-2); }
.endereco dd + dd { margin-top: var(--space-xs); }
@media (min-width: 52rem) {
  .endereco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- perguntas ---------- */
.perguntas-secao { padding-block: var(--space-3xl); }
.perguntas-secao h2 { font-size: var(--text-2xl); }
.perguntas { margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); max-width: 46rem; }
.perguntas details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.perguntas summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  min-height: 3.5rem;
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 60ch; }
.perguntas details[open] p { animation: abrir var(--dur-slow) var(--ease-out); }
.perguntas summary:active { opacity: 0.7; }

/* ---------- fechamento — bloco vinho ---------- */
.fechamento { background: var(--color-accent); color: var(--color-accent-ink); }
.fechamento .wrap { padding-block: var(--space-4xl); }
.fechamento h2 { font-size: var(--text-display); max-width: 13ch; }
.fechamento .btn { margin-top: var(--space-xl); }
.fim-site { margin-top: var(--space-lg); color: var(--color-accent-ink); }
.fim-site a { color: inherit; font-weight: 500; text-underline-offset: 0.25em; white-space: nowrap; }

.rodape {
  padding-block: var(--space-xl);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.rodape .wrap { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }

/* ---------- barra fixa do WhatsApp (celular) ---------- */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out);
}
.barra[data-visivel="true"] { transform: translateY(0); }
.barra { display: flex; gap: var(--space-sm); }
.barra .btn { flex: 1 1 auto; }
.barra .btn--linha { flex: 0 0 auto; min-height: 3.25rem; background: var(--color-paper); }
@media (min-width: 52rem) {
  body { padding-bottom: 0; }
  .barra { display: none; }
}

/* ---------- animações leves ---------- */
/* só esconde antes de aparecer quando o JS está ativo — sem JS tudo fica visível */
.js [data-revela] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--atraso, 0ms);
}
.js [data-revela].visivel { opacity: 1; transform: none; }

/* foto do topo assenta devagar */
.js .abertura figure[data-revela] img,
.js .abertura figure[data-revela] video { transform: scale(1.04); transition: transform 1.4s var(--ease-out); }
.js .abertura figure[data-revela].visivel img,
.js .abertura figure[data-revela].visivel video { transform: none; }

@keyframes abrir {
  from { opacity: 0; transform: translateY(-0.375rem); }
  to { opacity: 1; transform: none; }
}

/* foto da lingerie aproxima de leve conforme rola (navegadores que suportam) */
@supports (animation-timeline: view()) {
  .lingerie figure { overflow: hidden; }
  .lingerie figure img {
    animation: aproximar linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes aproximar {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .js [data-revela] { opacity: 1; transform: none; }
}