/* ═══════════════════════════════════════════════
   VID — editorial cream / espresso palette
   Tokens da spec: --espresso --caramelo --preto --creme
   ═══════════════════════════════════════════════ */
:root {
  /* Heritage tokens */
  --espresso: #1E0F08;
  --caramelo: #A97228;
  --preto:    #0D0D0D;
  --creme:    #DEC9A8;

  /* Editorial palette stops (apenas para a paleta JS) */
  --ivory:        #F4EAD5;
  --cream:        #ECDDC0;
  --sand:         #E6D4B3;
  --sand-deep:    #DEC9A8;
  --beige-warm:   #D4B896;

  /* Ink — texto sobre creme */
  --ink:          #2A1A0E;
  --ink-soft:     rgba(42, 26, 14, 0.74);
  --ink-mute:     rgba(42, 26, 14, 0.48);
  --ink-faint:    rgba(42, 26, 14, 0.22);

  /* Creme — texto sobre espresso */
  --creme-soft:   rgba(244, 234, 213, 0.78);
  --creme-mute:   rgba(244, 234, 213, 0.50);
  --creme-faint:  rgba(244, 234, 213, 0.22);

  --serif: "Cinzel", Georgia, serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* scroll-behavior:smooth removido — conflitava com o scrub baseado em scroll */
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Stage de fundo — paleta JS escreve em --bg.
   Sem noise SVG nem mix-blend-mode: o repaint era caro e pouco perceptível. */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 247, 232, 0.35) 0%, transparent 60%),
    var(--bg, var(--ivory));
  transition: background-color 0.5s ease;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════ */
/* ─── Liquid glass header ─── */
.header {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 32px;
  color: var(--ink);
  border-radius: 999px;
  width: min(50vw, 720px);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(255, 255, 255, 0.26) 100%);
  backdrop-filter: blur(42px) saturate(220%) brightness(115%);
  -webkit-backdrop-filter: blur(42px) saturate(220%) brightness(115%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 -1px 0 rgba(255, 255, 255, 0.25) inset,
    0 16px 38px rgba(60, 32, 14, 0.10),
    0 2px 8px rgba(60, 32, 14, 0.06);
  transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, top 0.4s ease;
  overflow: hidden;
}
/* Reflexo especular sutil percorrendo a borda superior */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,
      rgba(255, 255, 255, 0.35) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%,
      rgba(169, 114, 40, 0.12) 0%,
      transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.header.solid {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(255, 255, 255, 0.26) 100%);
  backdrop-filter: blur(42px) saturate(220%) brightness(115%);
  -webkit-backdrop-filter: blur(42px) saturate(220%) brightness(115%);
  padding: 8px 26px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 -1px 0 rgba(255, 255, 255, 0.25) inset,
    0 16px 38px rgba(60, 32, 14, 0.10),
    0 2px 8px rgba(60, 32, 14, 0.06);
}
.header .logo, .header nav { position: relative; z-index: 1; }

/* ─── Texto do header adapta ao fundo (variável --header-ink, set por JS) ───
   Em seções claras (S3/S4) → marrom escuro; em seções escuras (S2 dark, S5, S7)
   → creme. Sombra sutil acompanha pra dar microcontorno em qualquer transição. */
:root { --header-ink: var(--ink); --header-shadow: rgba(255,255,255,0.45); }
body.header-dark { --header-ink: var(--creme); --header-shadow: rgba(0,0,0,0.35); }

.header .logo,
.header nav a {
  color: var(--header-ink);
  text-shadow: 0 1px 2px var(--header-shadow);
  transition: color 0.45s ease, text-shadow 0.45s ease;
}
.header nav a:hover { color: var(--caramelo); }
.header .logo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.4em;
  font-weight: 500;
}
.header nav {
  display: flex;
  gap: 36px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.header nav a { opacity: 0.72; transition: opacity 0.3s, color 0.3s; }
.header nav a:hover { opacity: 1; color: var(--caramelo); }

/* ─── Link bloqueado ("Comunidade" — em breve) ─── */
.header nav a.nav-locked {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;
  position: relative;
}
.header nav a.nav-locked:hover {
  opacity: 0.55;
  color: inherit;       /* não vira caramelo no hover */
}
/* Cadeado que desliza ao lado no hover */
.header nav a.nav-locked::after {
  content: "🔒";
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.header nav a.nav-locked:hover::after {
  opacity: 1;
  transform: translateX(0);
}
/* Tooltip "Em breve" abaixo no hover */
.header nav a.nav-locked::before {
  content: "Em breve";
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  padding: 5px 10px;
  background: var(--espresso);
  color: var(--creme);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(60, 32, 14, 0.20);
}
.header nav a.nav-locked:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Pequeno "shake" no clique pra dar feedback de bloqueado */
.header nav a.nav-locked:active {
  animation: lockedShake 0.32s ease;
}
@keyframes lockedShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ═══════════════════════════════════════════════
   Seção 1 — Abertura (estática, top-down)
   ═══════════════════════════════════════════════ */
.s1 {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 24px 8vh;
}
.s1 .bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(201, 168, 127, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(122, 84, 46, 0.12) 100%);
  pointer-events: none;
}
.s1 .copy {
  position: relative;
  text-align: center;
  color: var(--ink);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.s1 .hero-caderno {
  margin: 0;
  width: min(720px, 82vw);
  animation: heroRise 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.s1 .hero-caderno img {
  width: 100%;
  height: auto;
  display: block;
  /* Uma única sombra suave — antes eram 3 drop-shadows + filtros, paint pesado */
  box-shadow: 0 28px 48px rgba(60, 32, 14, 0.30);
  border-radius: 2px;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.s1 h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--ink);
}
.s1 .sub {
  font-family: var(--sans);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.s1 .sub .arrow {
  display: inline-block;
  width: 1px; height: 28px;
  background: var(--caramelo);
  position: relative;
  animation: pulseDown 2.4s ease-in-out infinite;
  transform-origin: top;
}
.s1 .sub .arrow::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  border-right: 1px solid var(--caramelo);
  border-bottom: 1px solid var(--caramelo);
}
@keyframes pulseDown {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0.4; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.4; }
}
.s1 .selo {
  position: absolute;
  bottom: 24px; right: 32px;
  width: 80px;
  opacity: 0.5;
  z-index: 2;
}

/* ═══════════════════════════════════════════════
   Seção 2 — Animação (12 momentos, vídeo sticky)
   Altura ~1020vh (12 × 85vh)
   ═══════════════════════════════════════════════ */
.s2 {
  position: relative;
  background: transparent;
  height: 1220vh; /* +200vh de "freeze zone" no início para os estágios do M1 */
}
.s2-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  transition: background-color 0.6s ease;
}
.s2-sticky.dark-stage {
  /* Reforço do contraste no arco estúdio — caso a paleta esteja em transição */
  background-color: rgba(13, 13, 13, 0.35);
}
.s2-video-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.s2-video-wrap canvas,
.s2-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: contrast(1.02);
  transition: filter 0.8s ease;
}
/* M12 — caderno embaça quando a tagline final aparece, e desembaça no repouso */
.s2-video-wrap.blurred canvas {
  filter: contrast(1.02) blur(10px);
}

/* Selo discreto + contador no palco da S2 */
.s2-selo {
  position: absolute;
  top: 32px; left: 56px;
  width: 60px;
  opacity: 0.48;
  z-index: 6;
  transition: filter 0.5s ease, opacity 0.5s ease;
}
.moment-counter {
  position: absolute;
  top: 32px; right: 56px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--ink-mute);
  z-index: 6;
  transition: color 0.5s ease;
}
.moment-counter strong {
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}
/* No arco estúdio, contador e selo viram creme */
.s2-sticky.dark-stage .s2-selo {
  filter: invert(94%) sepia(8%) saturate(220%) hue-rotate(2deg) brightness(105%);
  opacity: 0.55;
}
.s2-sticky.dark-stage .moment-counter        { color: var(--creme-mute); }
.s2-sticky.dark-stage .moment-counter strong { color: var(--creme); }

/* ─── Blocos de copy: posicionamento e visibilidade ─── */
.moment {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 4;
}
.moment.active { opacity: 1; transform: translateY(0); }

/* Durante o scroll / snap em curso, esconde todo texto.
   Só aparece quando o movimento para — fade-in via transition do .moment. */
body.is-scrolling .moment:not(.climax),
body.is-scrolling .moment.active:not(.climax) { opacity: 0; }
body.is-scrolling .moment.m1-dual .m1-stage-1.show,
body.is-scrolling .moment.m1-dual .m1-stage-2.show { opacity: 0; }
/* M12 climax: deixa o cross-fade interno (via .show) controlar opacidade.
   Sem override de is-scrolling, o texto do Stage 2 permanece estável quando
   o usuário rola pra fora da S2 (rumo às especificações). */
.moment .block {
  max-width: 380px;
  color: var(--ink);
  transition: color 0.6s ease;
}
.moment.right  .block { margin-left: auto;  margin-right: 4vw; }
.moment.left   .block { margin-left: 4vw;   margin-right: auto; }
.moment.center .block { margin: 0 auto; max-width: 600px; text-align: center; }

/* Negrito sutil dentro dos blocos — peso editorial, sem berrar */
.moment .block strong {
  font-weight: 600;
  color: inherit;
  letter-spacing: 0.005em;
}

/* ─── Cor de texto adapta ao fundo (claro/escuro) ───
   Variável --copy-color é atualizada via body.bg-dark (JS).
   Sobrepõe as cores fixas das classes .dark legadas, garantindo contraste
   correto independente da paleta atual. */
:root { --copy-color: var(--ink); }
body.bg-dark { --copy-color: var(--creme); }

.moment .block,
.moment .block p,
.moment .block h2,
.moment .block h3,
.moment .block strong { color: var(--copy-color); }

/* Bondinho do M1 só inverte (vira creme) quando o fundo está escuro;
   no fundo claro mantém a cor original para não desaparecer. */
body:not(.bg-dark) .moment.m1-dual .m1-selo {
  filter: none;
  opacity: 0.6;
}

/* ─── M1 — duas etapas (título à esquerda → texto à direita) ─── */
.moment.m1-dual { padding: 0; }
.moment.m1-dual .block {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(34vw, 460px);
  margin: 0 !important;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.moment.m1-dual .m1-title-block {
  left: 6vw;
  text-align: left;
  transform: translateY(-50%) translateX(-12px);
}
.moment.m1-dual .m1-right-block {
  right: 6vw;
  text-align: left;
  transform: translateY(-50%) translateX(12px);
}
.moment.m1-dual.active .m1-stage-1.show,
.moment.m1-dual.active .m1-stage-2.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.moment.m1-dual .m1-selo {
  width: 56px;
  opacity: 0.78;
  margin: 0 0 22px;
  display: block;
  filter: invert(94%) sepia(8%) saturate(220%) hue-rotate(2deg) brightness(105%);
}
.moment.m1-dual .m1-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--copy-color);
}

/* M2 — texto justificado à esquerda dentro do bloco centralizado */
.moment.m2-justified .block {
  text-align: left;
}
.moment.m2-justified h2 {
  text-align: center;
}
.moment.m2-justified p {
  text-align: justify;
  hyphens: auto;
}

/* M3 — texto branco com sombra delicada (alto contraste sobre o caderno) */
.moment[data-momento="3"] .block,
.moment[data-momento="3"] .block h2,
.moment[data-momento="3"] .block p,
.moment[data-momento="3"] .block strong { color: #ffffff; }
.moment[data-momento="3"] h2,
.moment[data-momento="3"] p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
/* Espaço sutil entre os dois parágrafos (igual ao M5) */
.moment[data-momento="3"] p + p {
  margin-top: 14px;
}

/* ─── M7 — "Feito para durar" ─── */
/* Sobe o conjunto todo (h2 + p) 10px e desloca 10px à esquerda.
   Reduz a folga entre título e parágrafo (a tipografia +15% afastou demais). */
.moment.m7-shifted .block {
  transform: translate(-10px, -10px);
}
.moment.m7-shifted h2 {
  margin-bottom: 10px; /* era 22px no .moment h2 */
}
.moment.m7-shifted p.small {
  line-height: 1.55;   /* aperta um pouco a respiração interna */
}

/* ─── M8 — ficha técnica nos 4 cantos (classes próprias m8-*) ─── */
/* Blocos mais juntos do caderno (sem encostar), Capa e Miolo com texto à direita
   "encostando" no caderno; Formato e Origem espelham com texto à esquerda. */
.moment.specs.m8-grid .block {
  position: absolute;
  width: min(20vw, 240px);
  max-width: 240px;
  margin: 0 !important;
}
/* Lado esquerdo — texto alinhado à direita, afastado 30px MAIS pra esquerda */
.moment.specs.m8-grid .m8-capa,
.moment.specs.m8-grid .m8-miolo {
  right: 62vw;
  left: auto;
  text-align: right;
  transform: translateX(-30px);
}
/* Lado direito — texto alinhado à esquerda, afastado 30px MAIS pra direita */
.moment.specs.m8-grid .m8-formato,
.moment.specs.m8-grid .m8-origem {
  left: 62.5vw;
  right: auto;
  text-align: left;
  transform: translateX(30px);
}
/* Linhas — superior e inferior, mais próximas do centro vertical */
.moment.specs.m8-grid .m8-capa,
.moment.specs.m8-grid .m8-formato { top: 26%;    bottom: auto; }
.moment.specs.m8-grid .m8-miolo,
.moment.specs.m8-grid .m8-origem  { bottom: 26%; top: auto;    }

/* ─── M9 — 4 imagens nos 4 cantos (caderno visível no centro) ─── */
.moment.m9-gallery {
  padding: 0;
}
.moment.m9-gallery .m9-tile {
  position: absolute;
  width: 32vw;
  height: 50vh;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Sem border-radius nem margem: cada par encosta na irmã (vertical) e
     cada imagem encosta nas bordas da tela (lateral + topo/base). */
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
}
.moment.m9-gallery .m9-tl { top: 0;    left: 0;   }
.moment.m9-gallery .m9-tr { top: 0;    right: 0;  }
.moment.m9-gallery .m9-bl { bottom: 0; left: 0;   }
.moment.m9-gallery .m9-br { bottom: 0; right: 0;  }
.moment.m9-gallery.active .m9-tile { opacity: 1; transform: translateY(0); }
/* Entrada escalonada nos 4 cantos */
.moment.m9-gallery.active .m9-tr { transition-delay: 0.08s; }
.moment.m9-gallery.active .m9-bl { transition-delay: 0.16s; }
.moment.m9-gallery.active .m9-br { transition-delay: 0.24s; }

/* ─── M10 — par "Lombada" + "Acabamento impecável" (totalmente independente do M8) ─── */
.moment.specs.m10-pair .block {
  position: absolute;
  width: min(22vw, 280px);
  max-width: 280px;
  margin: 0 !important;
}
.moment.specs.m10-pair .m10-lombada {
  top: 20%;
  left: 6vw;
  right: auto;
  text-align: left;
  width: min(30vw, 420px);
  max-width: 420px;
}
/* Garante exatamente 2 linhas: "Assinado na" / "Lombada." */
.moment.specs.m10-pair .m10-lombada h2.lines-2 span {
  display: block;
  white-space: nowrap;
}
.moment.specs.m10-pair .m10-impecavel {
  bottom: 20%;
  right: 4vw;      /* deslocado um pouco mais à direita */
  left: auto;
  text-align: right;
  width: min(26vw, 340px);
  max-width: 340px;
}

/* Aumento de 15% nas tipografias do scroll (S2) */
.moment h2 {
  font-size: clamp(32px, 3.9vw, 48px);
}
.moment p {
  font-size: 18px;
}
.moment p.small {
  font-size: 18px;
}
.moment.on-page h2 {
  font-size: clamp(23px, 2.5vw, 35px);
}
.moment.on-page p {
  font-size: clamp(15px, 1.2vw, 17px);
}
.moment.specs h3 {
  font-size: clamp(25px, 2.75vw, 32px);
}
.moment.specs p.small {
  font-size: 18px;
}

/* M6 — sobreposta: copy sobre o caderno aberto.
   backdrop-filter removido — era a fonte #1 de jank no scroll.
   Gradiente sólido com alpha dá leitura suficiente sem custo de paint. */
.moment.overlay .block {
  position: relative;
  padding: 28px 32px;
  background: linear-gradient(180deg,
              rgba(244, 234, 213, 0.0)  0%,
              rgba(244, 234, 213, 0.88) 24%,
              rgba(244, 234, 213, 0.94) 100%);
  border-radius: 4px;
}

/* M7 — sobe o texto pra parte superior da viewport */
.moment[data-momento="7"] {
  align-items: flex-start;
  padding-top: 18vh;
}

/* M2 — comprime o corpo pra ficar exatamente sob o título "A VID começou assim."
   Título mantém uma única linha mesmo extrapolando a largura do bloco. */
.moment[data-momento="2"] .block { max-width: 420px; }
.moment[data-momento="2"] h2 { white-space: nowrap; }

/* M8 — ficha técnica nos 4 cantos do caderno.
   Capa (sup. esq) · Formato (sup. dir.) · Miolo (inf. esq.) · Origem (inf. dir.)
   Tipografia padrão: H3 Cinzel + p.small DM Sans. */
.moment.specs {
  padding: 0;
  display: block;
}
.moment.specs .block {
  position: absolute;
  width: min(20vw, 260px);
  max-width: 260px;
  margin: 0 !important;
  text-align: left;
}
.moment.specs .spec-tl { top: 18%;    left: 18vw;  }
.moment.specs .spec-tr { top: 18%;    right: 18vw; }
.moment.specs .spec-bl { bottom: 18%; left: 18vw;  }
.moment.specs .spec-br { bottom: 18%; right: 18vw; }

/* M9 — afasta os dois blocos mais para as bordas (mais espaço pra lombada no centro) */
.moment.specs[data-momento="9"] .spec-tl { left: 8vw;  }
.moment.specs[data-momento="9"] .spec-br { right: 8vw; }
.moment.specs h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--copy-color);
}
.moment.specs p.small {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  color: var(--copy-color);
  opacity: 0.82;
}

/* on-page — copy posicionada SOBRE a página direita do caderno aberto.
   Sem fundo: o papel branco já é o "fundo". Texto em tinta escura.
   Ajustes finos: left/top/max-width para alinhar com a página. */
.moment.on-page { padding: 0; }
.moment.on-page .block,
.moment.on-page.right .block,
.moment.on-page.left  .block {
  position: absolute;
  left: 56%;
  top: 40%;
  transform: translateY(-50%);
  max-width: min(26vw, 360px);
  margin: 0 !important;
  text-align: left;
  color: var(--ink);
}
.moment.on-page h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--ink);
}
.moment.on-page p {
  font-family: var(--sans);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--ink);
  opacity: 0.85;
}

/* Arco estúdio (M8-12) — copy adapta ao fundo (--copy-color, set por body.bg-dark) */
.moment.dark .block { color: var(--copy-color); }
.moment.dark.overlay .block {
  background: linear-gradient(180deg,
              rgba(13, 13, 13, 0.0) 0%,
              rgba(13, 13, 13, 0.55) 28%,
              rgba(13, 13, 13, 0.65) 100%);
}

/* Hierarquia tipográfica da copy */
.moment h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin: 0 0 22px;
  color: inherit;
}
.moment h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  margin: 0 0 14px;
  color: inherit;
}
.moment p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
  opacity: 0.82;
}
/* .small equalizado ao corpo padrão — antes era 14px, gerava inconsistência */
.moment p.small { font-size: 16px; line-height: 1.65; }

/* ─── M12 — clímax ─── */
.moment.climax { display: block; padding: 0; }
.moment.climax .block,
.moment.climax.center .block {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 640px;
  width: calc(100% - 12vw);
  text-align: center;
  margin: 0 !important;
}
/* Stage-2 entra mais alto que o centro da tela */
.moment.climax .climax-stage-2 { top: 22%; }

/* ─── M12 — cross-fade entre Stage 1 (tagline) e Stage 2 (logo + final) ───
   Ambos os estágios ocupam o MESMO espaço central; a troca acontece via opacity
   das classes .show. Cor marrom escuro (espresso) sobre o fundo claro. */
.moment.climax.climax-flow .climax-stage-1,
.moment.climax.climax-flow .climax-stage-2 {
  top: 50%;
}
.moment.climax.climax-flow .climax-logo,
.moment.climax.climax-flow .climax-final {
  color: var(--espresso); /* marrom escuro */
}
/* "Enfim, um caderno para toda a vida…" — bicolor automática via halo.
   Texto base em marrom escuro (visível sobre o caderno claro);
   halo creme em volta de cada letra (visível quando a letra vaza pro
   fundo escuro do estúdio). Funciona em qualquer largura de tela:
   letras "fora" do caderno mantêm legibilidade pelo contorno claro. */
.moment.climax.climax-flow .climax-tagline {
  color: var(--espresso);
  text-shadow:
    -1px -1px 0 var(--creme),
     1px -1px 0 var(--creme),
    -1px  1px 0 var(--creme),
     1px  1px 0 var(--creme),
     0   0   6px rgba(244, 234, 213, 0.85),
     0   0  18px rgba(244, 234, 213, 0.45);
}
.moment.climax .climax-title,
.moment.climax .climax-apoio,
.moment.climax .climax-tagline,
.moment.climax .climax-logo,
.moment.climax .climax-final {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.moment.climax .climax-title.show,
.moment.climax .climax-apoio.show,
.moment.climax .climax-tagline.show,
.moment.climax .climax-logo.show,
.moment.climax .climax-final.show {
  opacity: 1;
  transform: translateY(0);
}
/* Stage-2 — logo VID + texto final */
.moment.climax .climax-logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  margin: 0 0 36px;
  color: var(--creme);
  line-height: 1;
}
.moment.climax .climax-final {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.3;
  color: var(--creme);
  margin: 0;
  letter-spacing: 0.01em;
}
.moment.climax .climax-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  margin: 0 0 18px;
  color: var(--creme);
}
.moment.climax .climax-apoio {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--creme-soft);
  margin: 0 0 40px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.moment.climax .climax-tagline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--creme);
}

/* ═══════════════════════════════════════════════
   Reduced motion — empilha os 12 estados como blocos
   ═══════════════════════════════════════════════ */
body.reduced-motion .s2 { height: auto; }
body.reduced-motion .s2-sticky {
  position: static;
  height: auto;
  display: block;
}
body.reduced-motion .s2-video-wrap,
body.reduced-motion .s2-selo,
body.reduced-motion .moment-counter { display: none; }
body.reduced-motion .moment {
  position: relative;
  height: auto;
  padding: 80px 24px;
  opacity: 1;
  transform: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
}
body.reduced-motion .moment.dark {
  background: var(--preto);
  color: var(--creme);
}
body.reduced-motion .moment.dark .block { color: var(--creme); }
body.reduced-motion .moment .static-poster {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}
body.reduced-motion .moment .static-poster img {
  width: 100%;
  height: auto;
  display: block;
}
body.reduced-motion .moment .block {
  max-width: 100%;
  margin: 0 !important;
  text-align: left;
}
body.reduced-motion .moment.center .block { text-align: center; }

/* ═══════════════════════════════════════════════
   Seções estáticas — base
   ═══════════════════════════════════════════════ */
.section {
  padding: 120px 80px;
  background: transparent;
  color: var(--ink);
  position: relative;
}
.section .wrap { max-width: 1180px; margin: 0 auto; }

/* ═══════════════════════════════════════════════
   Seção 3 — Especificações
   ═══════════════════════════════════════════════ */
.s3 .grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: stretch;
}
/* ─── Visualizador de produto com seletor de cor (substitui .s3 .photo) ─── */
.s3 .product-viewer {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.s3 .product-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(60, 32, 14, 0.18);
}

.s3 .color-picker {
  display: flex;
  gap: 18px;
  margin-top: 6px;
}
.s3 .color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--swatch, var(--caramelo));
  border: 2px solid rgba(42, 26, 14, 0.18);
  box-shadow: 0 2px 6px rgba(60, 32, 14, 0.18),
              0 0 0 0 var(--caramelo);
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.s3 .color-swatch:hover {
  transform: scale(1.10);
}
.s3 .color-swatch.active {
  border-color: var(--caramelo);
  box-shadow: 0 2px 6px rgba(60, 32, 14, 0.18),
              0 0 0 3px rgba(169, 114, 40, 0.22);
  transform: scale(1.12);
}
.s3 .color-name {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.s3 h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ink);
  margin: 0 0 40px;
  line-height: 1.1;
}
.s3 dl { margin: 0; border-top: 1px solid var(--ink-faint); }
.s3 .row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-faint);
  align-items: baseline;
}
.s3 .row dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramelo);
}
.s3 .row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.s3 .cta-wrap {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
}

/* Botão primário */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 20px 36px;
  background: var(--espresso);
  color: var(--creme);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.22em;
  border: 1px solid var(--caramelo);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 12px 24px rgba(60, 32, 14, 0.18);
}
.btn-primary:hover {
  background: #2a1810;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(60, 32, 14, 0.25);
}
.btn-primary .arrow {
  width: 22px; height: 1px; background: currentColor;
  position: relative;
}
.btn-primary .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════
   Seção 4 — Vida do caderno
   ═══════════════════════════════════════════════ */
.s4 {
  background: transparent;
  padding: 140px 80px;
  position: relative;
}
.s4 .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.s4 .gallery {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(60, 32, 14, 0.18);
}
.s4 .gallery img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.s4 .gallery img.on { opacity: 1; }
.s4 .gallery .dots {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.s4 .gallery .dots button {
  width: 6px; height: 6px;
  background: rgba(244, 234, 213, 0.55);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.s4 .gallery .dots button.on { background: var(--ivory); transform: scale(1.4); }
.s4 .txt h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 28px;
}
.s4 .txt p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 46ch;
}

/* ═══════════════════════════════════════════════
   Seção 5 — Sobre a VID (Espresso pleno)
   ═══════════════════════════════════════════════ */
.s5 {
  background: var(--espresso);
  color: var(--creme);
  padding: 90px 80px 56px; /* topo aproxima do bloco anterior; base reduzida p/ encostar no rodapé */
  text-align: center;
  position: relative;
}
.s5::before {
  content: "";
  position: absolute;
  top: 60px; left: 50%;
  width: 320px; height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(169, 114, 40, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.s5 .selo {
  width: 56px;
  margin: 0 auto 32px;
  display: block;
  position: relative;
  /* Selo em caramelo sobre espresso */
  filter: invert(54%) sepia(57%) saturate(485%) hue-rotate(2deg) brightness(85%);
  opacity: 0.9;
}
.s5 h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 36px;
  letter-spacing: 0.02em;
  color: var(--creme);
}
.s5 p {
  max-width: 600px;
  margin: 0 auto 18px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.85;
  color: var(--creme-soft);
  font-weight: 300;
}

/* ═══════════════════════════════════════════════
   Seção 6 — Permanência
   ═══════════════════════════════════════════════ */
.s6 {
  background: transparent;
  padding: 140px 80px;
  text-align: center;
  position: relative;
}
.s6 h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 44px);
  color: var(--ink);
  margin: 0 auto 80px;
  max-width: 600px;
  line-height: 1.1;
}
.s6 .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.s6 .col .icon {
  width: 56px; height: 56px;
  margin: 0 auto 28px;
  color: var(--caramelo);
}
.s6 .col h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.3;
}
.s6 .col p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--preto);
  max-width: 30ch;
  margin: 0 auto;
}
.s6 .cta-wrap { margin-top: 100px; }

/* ═══════════════════════════════════════════════
   Seção 7 — Rodapé (Espresso pleno)
   ═══════════════════════════════════════════════ */
.s7 {
  background: var(--espresso);
  color: var(--creme);
  padding: 56px 80px 40px; /* topo reduzido p/ aproximar o logo do texto "Sobre a VID" */
  position: relative;
}
.s7 .top {
  text-align: center;
  margin-bottom: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--creme-faint);
}
.s7 .top .logo {
  font-family: var(--serif);
  font-size: 56px;
  letter-spacing: 0.42em;
  margin-bottom: 24px;
  font-weight: 500;
  padding-left: 0.42em;
  color: var(--creme);
}
.s7 .top .selo {
  width: 64px;
  margin: 0 auto 24px;
  display: block;
  filter: invert(54%) sepia(57%) saturate(485%) hue-rotate(2deg) brightness(85%);
  opacity: 0.85;
}
.s7 .top .tag {
  font-family: var(--sans);
  font-style: italic;
  color: var(--creme-soft);
  opacity: 0.7;
  font-size: 16px;
}
.s7 .cols {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  padding-bottom: 60px;
}
.s7 h5 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--caramelo);
  margin: 0 0 20px;
  text-transform: uppercase;
}
.s7 ul { list-style: none; padding: 0; margin: 0; }
.s7 li { margin-bottom: 10px; font-size: 15px; color: var(--creme); }
.s7 li a { transition: color 0.3s; }
.s7 li a:hover { color: var(--caramelo); }
.s7 .jaculatoria {
  position: absolute;
  right: 56px;
  bottom: 28px;
  font-family: var(--sans);
  font-style: italic;
  font-size: 12px;
  color: var(--creme-mute);
  opacity: 0.4;
  letter-spacing: 0.04em;
}
.s7 .copyright {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--creme-faint);
  font-size: 12px;
  color: var(--creme-mute);
  opacity: 0.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* "Desenvolvido por GQL" — assinatura centralizada na base do rodapé */
.s7 .dev-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme-mute);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.s7 .dev-by:hover { opacity: 0.85; }
.s7 .dev-by img {
  height: 18px;
  width: auto;
  display: block;
  /* gql.svg em creme sobre fundo espresso */
  filter: invert(94%) sepia(8%) saturate(220%) hue-rotate(2deg) brightness(105%);
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════
   Botão flutuante (FAB) — 3º ponto de conversão
   ═══════════════════════════════════════════════ */
.fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 60;
  height: 48px;
  background: var(--caramelo);
  color: var(--espresso);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.24em;
  padding: 0 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(60, 32, 14, 0.28), 0 2px 6px rgba(60, 32, 14, 0.16);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
  font-weight: 500;
}
.fab:hover { background: #8f6020; }
.fab.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.fab .arrow {
  width: 16px; height: 1px; background: currentColor; position: relative;
}
.fab .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -2.5px;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════
   "Pular animação" — só mobile, canto inferior esquerdo
   ═══════════════════════════════════════════════ */
.skip-anim {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 16px;
  z-index: 60;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px;
  background: rgba(13, 13, 13, 0.55);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(244, 234, 213, 0.28);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.3s ease;
  cursor: pointer;
}
.skip-anim:hover,
.skip-anim:active {
  background: rgba(13, 13, 13, 0.72);
}
.skip-anim.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.skip-anim .skip-arrow {
  width: 12px;
  height: 12px;
  position: relative;
  display: inline-block;
}
/* Setinha apontando para baixo */
.skip-anim .skip-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 1px;
  height: 8px;
  background: currentColor;
  transform: translateX(-50%);
}
.skip-anim .skip-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
@media (max-width: 900px) {
  .skip-anim { display: inline-flex; }
}

/* ═══════════════════════════════════════════════
   Mobile (< 900px) — vídeo vertical nativo (1080×1930)
   preenche a tela inteira; a copy de cada momento vira
   overlay no topo, no rodapé ou no centro, conforme a
   composição do frame do caderno permitir.
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* ─── Header ─── */
  .header {
    width: auto;
    max-width: calc(100vw - 32px);
    padding: 10px 22px;
    justify-content: center;
  }
  .header.solid { padding: 8px 22px; }
  .header nav { display: none; }
  .header .logo { font-size: 16px; letter-spacing: 0.34em; }

  /* ─── S1 ─── */
  .s1 { min-height: 640px; padding: 14vh 20px 8vh; }
  .s1 .copy { gap: 28px; }
  .s1 .hero-caderno { width: 88vw; }
  .s1 h1 { font-size: clamp(32px, 8vw, 44px); }

  /* ─── Seções estáticas ─── */
  .section, .s4, .s5, .s6 { padding: 80px 22px; }
  .s5 { padding-bottom: 44px; }       /* aproxima do logo do rodapé no mobile */
  .s7 { padding: 44px 22px 30px; }
  .s7 .jaculatoria { position: static; display: block; text-align: center; margin-top: 24px; }
  .s7 .top .logo { font-size: 40px; letter-spacing: 0.36em; padding-left: 0.36em; }

  /* ════════════════════════════════════════════
     S2 — animação scroll-driven em vertical
     ════════════════════════════════════════════ */
  .s2 {
    height: 1200vh;
    /* Faixas de segurança: a cópia ancora nestas bandas em vez de offsets
       crus em vh. Assim nunca entra na zona vertical do caderno (telas altas)
       nem colide com a pílula/contador (topo) ou os botões fixos (rodapé).
       O piso em px vence nas telas curtas, onde 11vh é pequeno demais. */
    --safe-top: clamp(56px, 11vh, 120px);
    --safe-bottom: max(11vh, calc(env(safe-area-inset-bottom) + 84px));
  }
  /* Canvas preenche a tela inteira (não mais 52vh) */
  .s2-video-wrap {
    position: absolute;
    inset: 0;
    height: 100vh;
  }
  /* Selo e contador menores e mais perto dos cantos */
  .s2-selo { left: 18px; top: 20px; width: 40px; }
  .moment-counter { right: 18px; top: 24px; font-size: 10px; letter-spacing: 0.32em; }

  /* Reset do .moment: sem grid lateral; cada momento posiciona o
     próprio bloco com left/top específicos abaixo. */
  .moment {
    padding: 0;
    align-items: stretch;
  }
  .moment .block,
  .moment.right .block,
  .moment.left .block,
  .moment.center .block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 36px);
    max-width: 520px;
    margin: 0 !important;
    text-align: center;
    z-index: 5;
  }

  /* Tipografia da copy em mobile — encolhe pra caber sem quebrar.
     mantém a hierarquia (serif h2 maior, sans p menor). */
  .moment h2 { font-size: clamp(24px, 6.4vw, 32px); margin: 0 0 14px; line-height: 1.18; }
  .moment p  { font-size: 15px; line-height: 1.55; }
  .moment p.small { font-size: 14px; line-height: 1.55; }
  .moment.on-page h2 { font-size: clamp(20px, 5.6vw, 26px); }
  .moment.on-page p  { font-size: 13px; line-height: 1.5; }
  .moment.specs h2 { font-size: clamp(20px, 5.4vw, 26px); margin: 0 0 6px; }
  .moment.specs p.small { font-size: 13px; line-height: 1.55; }

  /* Default de posição vertical: copy embaixo (topo do caderno fica
     livre); momentos específicos sobrescrevem abaixo. */
  .moment .block { bottom: 9vh; top: auto; }
  .moment.center .block { bottom: 9vh; }

  /* Halo cinematográfico em todas as copies em mobile para garantir
     legibilidade quando o texto cruza a borda do caderno: claro/escuro
     opostos via --copy-color. */
  body.bg-dark .moment .block h2,
  body.bg-dark .moment .block p,
  body.bg-dark .moment .block strong {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
  body:not(.bg-dark) .moment .block h2,
  body:not(.bg-dark) .moment .block p,
  body:not(.bg-dark) .moment .block strong {
    text-shadow: 0 1px 2px rgba(244, 234, 213, 0.85);
  }

  /* ─── M1 dual — título em cima, texto embaixo ─── */
  .moment.m1-dual { padding: 0; }
  .moment.m1-dual .block {
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 36px);
    max-width: 520px;
    text-align: center;
  }
  .moment.m1-dual .m1-title-block {
    top: var(--safe-top);
    bottom: auto;
    transform: translate(-50%, 0);
  }
  .moment.m1-dual .m1-right-block {
    top: auto;
    bottom: var(--safe-bottom);
    transform: translate(-50%, 0);
  }
  .moment.m1-dual.active .m1-stage-1.show,
  .moment.m1-dual.active .m1-stage-2.show {
    transform: translate(-50%, 0);
  }
  .moment.m1-dual .m1-title {
    font-size: clamp(30px, 8.4vw, 44px);
    line-height: 1.08;
    text-align: center;
  }
  .moment.m1-dual .m1-selo {
    margin: 0 auto 14px;
    width: 46px;
  }
  .moment.m1-dual .m1-right-block h2 { text-align: center; }
  .moment.m1-dual .m1-right-block p  { text-align: left; }

  /* ─── M2 — "A VID começou assim" → topo da tela ───
     O caderno fica em pé na metade inferior do frame (~52–86%), então a cópia
     sobe para a faixa de madeira escura acima dele. */
  .moment[data-momento="2"] .block {
    top: var(--safe-top);
    bottom: auto;
    max-width: min(92vw, 460px);
  }
  .moment[data-momento="2"] h2 { white-space: normal; text-wrap: balance; }
  .moment.m2-justified p { text-align: center; hyphens: none; }

  /* ─── M3 — "Cada decisão pensada" ─── */
  .moment[data-momento="3"] .block { bottom: 8vh; }
  .moment[data-momento="3"] h2,
  .moment[data-momento="3"] p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }

  /* ─── M5 — texto ENCAIXADO na página aberta do caderno.
     A página branca ocupa ~L18–R76 / T30–B68 do frame (centro ~47/49%).
     O bloco abraça a largura da página (≈56vw) e centra no miolo dela, de modo
     que título e parágrafo fiquem inteiros sobre o papel — sem vazar pela borda
     curva à direita nem subir pro couro escuro acima. */
  .moment.on-page .block,
  .moment.on-page.right .block,
  .moment.on-page.left .block {
    left: 47%;
    top: 49%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(56vw, 300px);
    max-width: 300px;
    text-align: center;
  }
  .moment.on-page h2 {
    font-size: clamp(15px, 4.4vw, 19px);
    line-height: 1.16;
    margin: 0 0 8px;
    text-wrap: balance;
  }
  .moment.on-page p {
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.4;
    margin: 0 0 6px;
  }

  /* ─── M7 — "Feito para durar" → faixa superior ─── */
  .moment.m7-shifted .block {
    transform: translateX(-50%);
    top: var(--safe-top);
    bottom: auto;
    max-width: min(92vw, 34ch);
  }
  .moment.m7-shifted h2 { margin-bottom: 12px; }
  .moment.m7-shifted p { text-wrap: pretty; }

  /* CTA primário "Tenha um VID na sua mesa" quebra em duas linhas no mobile */
  .btn-primary .btn-label { text-align: center; }
  .btn-primary .cta-l1,
  .btn-primary .cta-l2 { display: block; }

  /* ─── M8 — ficha técnica (Capa/Formato/Miolo/Origem) OCULTA no mobile.
     A animação do caderno continua rodando atrás; só os textos somem. ─── */
  .moment.specs.m8-grid { display: none !important; }
  .moment.specs.m8-grid { padding: 0; }
  .moment.specs.m8-grid .block {
    position: absolute;
    width: 44vw;
    max-width: 44vw;
    margin: 0 !important;
    padding: 0;
    transform: none !important;
    left: auto;
    right: auto;
  }
  .moment.specs.m8-grid .m8-capa {
    top: var(--safe-top); bottom: auto;
    left: 5vw; right: auto;
    text-align: left;
  }
  /* Formato fica ao lado do contador 08/12 — começa um pouco mais abaixo */
  .moment.specs.m8-grid .m8-formato {
    top: clamp(72px, 12vh, 132px); bottom: auto;
    right: 5vw; left: auto;
    text-align: right;
  }
  .moment.specs.m8-grid .m8-miolo {
    bottom: var(--safe-bottom); top: auto;
    left: 5vw; right: auto;
    text-align: left;
  }
  .moment.specs.m8-grid .m8-origem {
    bottom: var(--safe-bottom); top: auto;
    right: 5vw; left: auto;
    text-align: right;
  }

  /* ─── M9 — sem imagens laterais em mobile (sobrariam apertadas
     com o caderno vertical). Só o caderno + selo do contador. */
  .moment.m9-gallery .m9-tile { display: none; }

  /* ─── M10 — "Assinado na Lombada" topo / "Acabamento impecável" base ─── */
  .moment.specs.m10-pair { padding: 0; }
  .moment.specs.m10-pair .block {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    width: calc(100% - 36px);
    max-width: 520px;
    margin: 0 !important;
    text-align: center;
    transform: translateX(-50%);
  }
  /* O texto fica sobre o couro da lombada (decisão de design), mas reposiciona
     pra não bater na pílula VID/contador (topo) nem nos botões fixos (rodapé). */
  .moment.specs.m10-pair .m10-lombada {
    top: clamp(84px, 13vh, 140px); bottom: auto;
  }
  .moment.specs.m10-pair .m10-impecavel {
    bottom: var(--safe-bottom); top: auto;
  }
  .moment.specs.m10-pair .m10-lombada h2.lines-2 span {
    display: inline;
    white-space: normal;
  }
  .moment.specs.m10-pair .m10-lombada h2.lines-2 span + span::before {
    content: " ";
  }
  /* Halo um pouco mais firme sobre o couro iluminado (sem scrim) */
  .moment.specs.m10-pair .block h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.4);
  }

  /* ─── M12 — clímax centralizado ─── */
  .moment.climax .block,
  .moment.climax.center .block {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: calc(100% - 36px);
    max-width: 520px;
  }
  .moment.climax.climax-flow .climax-stage-1,
  .moment.climax.climax-flow .climax-stage-2 { top: 50%; }
  .moment.climax .climax-tagline {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.08;
  }
  .moment.climax .climax-logo {
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: 0.36em;
    padding-left: 0.36em;
    margin: 0 0 22px;
  }
  .moment.climax .climax-final {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.3;
  }

  /* ════════════════════════════════════════════
     Demais seções (S3, S4, S5, S6, S7) — mantém
     ════════════════════════════════════════════ */
  .s3 .grid, .s4 .grid { grid-template-columns: 1fr; gap: 48px; }
  .s3 .row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .s6 .cols { grid-template-columns: 1fr; gap: 48px; }
  .s7 .cols { grid-template-columns: 1fr; gap: 36px; text-align: center; }

  .fab { bottom: 16px; right: 16px; height: 40px; padding: 0 18px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════
   Mobile estreito (< 380px) — ajustes finos
   ═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .moment h2 { font-size: 22px; }
  .moment p, .moment p.small { font-size: 13px; }
  .moment.specs.m8-grid .block { width: 46vw; max-width: 46vw; }
  .moment.specs.m8-grid h2 { font-size: 18px; }
  .moment.specs.m8-grid p.small { font-size: 12px; line-height: 1.5; }
  .moment.m1-dual .m1-title { font-size: 28px; }
  /* M5: página é minúscula em telas estreitas — encolhe pra caber no papel */
  .moment.on-page h2 { font-size: 14px; }
  .moment.on-page p  { font-size: 11px; line-height: 1.34; }
}

/* ═══════════════════════════════════════════════
   Mobile BAIXO (≤ 700px de altura) — telas curtas tipo iPhone SE.
   É aqui que a cópia de topo/rodapé encostava no caderno e nos botões:
   é um problema de ALTURA, então encolhe os blocos verticalmente pra
   caberem nas faixas de segurança acima/abaixo do caderno.
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) and (max-height: 700px) {
  .moment h2 { font-size: clamp(22px, 5.8vw, 27px); margin-bottom: 10px; }
  .moment p  { font-size: 14px; line-height: 1.45; }
  .moment p.small { font-size: 13px; line-height: 1.45; }
  /* parágrafos documentais mais estreitos = blocos mais baixos, que cabem
     na banda de madeira escura sem invadir o caderno */
  .moment[data-momento="2"] .block,
  .moment.m7-shifted .block { max-width: min(92vw, 30ch); }
  .moment.m1-dual .m1-right-block { max-width: min(92vw, 32ch); }
  /* M5: aperta ainda mais pra não estourar a página curta */
  .moment.on-page h2 { font-size: 14px; }
  .moment.on-page p  { font-size: 11px; line-height: 1.32; margin-bottom: 4px; }
}

/* ═══════════════════════════════════════════════
   Telas MÉDIAS (tablet / iPad retrato — 600 a 900px).
   Mesma estrutura do mobile (vídeo vertical + faixas de segurança),
   mas a tipografia mobile fica pequena demais num ecrã grande, então
   escala tudo proporcionalmente. Vem DEPOIS do bloco mobile e da query
   de altura para vencer a cascata nesta faixa de largura.
   Telemóveis (< 600px) e desktop (> 900px) não são afetados.
   ═══════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 900px) {
  .header .logo { font-size: 19px; letter-spacing: 0.36em; }
  .s2-selo { width: 52px; top: 26px; left: 26px; }
  .moment-counter { top: 30px; right: 26px; font-size: 12px; }

  /* Copy documental */
  .moment h2 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 18px; }
  .moment p  { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.6; }
  .moment p.small { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; }
  /* blocos podem ser mais largos no tablet sem alcançar o caderno */
  .moment .block,
  .moment.right .block,
  .moment.left .block,
  .moment.center .block { max-width: 640px; }
  .moment[data-momento="2"] .block { max-width: min(86vw, 600px); }
  /* M7: no tablet o caderno (em pé) sobe e enche a tela, então o parágrafo
     fica menos margem acima. Mantém-se mais compacto e ganha halo forte para
     ler sobre o couro onde a sobreposição é inevitável (igual ao M10). */
  .moment.m7-shifted .block { max-width: min(80vw, 40ch); }
  .moment.m7-shifted h2 { font-size: clamp(28px, 3.6vw, 34px); }
  .moment.m7-shifted p  { font-size: clamp(15px, 1.9vw, 17px); line-height: 1.5; }
  .moment.m7-shifted .block h2,
  .moment.m7-shifted .block p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.5);
  }

  /* M1 — título e texto */
  .moment.m1-dual .m1-title { font-size: clamp(42px, 6.2vw, 58px); }
  .moment.m1-dual .m1-selo { width: 60px; margin-bottom: 20px; }
  .moment.m1-dual .block { max-width: min(86vw, 600px); }

  /* M5 — texto na página (a página é maior no tablet → texto maior e mais largo) */
  .moment.on-page .block,
  .moment.on-page.right .block,
  .moment.on-page.left .block { width: min(60vw, 440px); max-width: 440px; }
  .moment.on-page h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; margin-bottom: 12px; }
  .moment.on-page p  { font-size: clamp(15px, 2vw, 18px); line-height: 1.5; margin-bottom: 8px; }

  /* M8 — ficha técnica nos cantos.
     No tablet o canvas preenche a LARGURA (caderno mais largo, ~24–80% da tela),
     então os blocos laterais encolhem e encostam nas bordas pra caberem nas
     margens estreitas ao lado do caderno, sem o tocar. */
  .moment.specs h2 { font-size: clamp(22px, 2.9vw, 27px); margin-bottom: 8px; }
  .moment.specs.m8-grid p.small { font-size: clamp(13px, 1.8vw, 15px); line-height: 1.5; }
  .moment.specs.m8-grid .block { width: 19vw; max-width: 200px; }
  .moment.specs.m8-grid .m8-capa,
  .moment.specs.m8-grid .m8-miolo { left: 3vw; }
  .moment.specs.m8-grid .m8-formato,
  .moment.specs.m8-grid .m8-origem { right: 3vw; }

  /* M12 — clímax */
  .moment.climax .climax-tagline { font-size: clamp(40px, 6vw, 56px); }
  .moment.climax .climax-logo { font-size: clamp(40px, 6vw, 54px); margin-bottom: 28px; }
  .moment.climax .climax-final { font-size: clamp(24px, 3.4vw, 31px); }
  .moment.climax .block,
  .moment.climax.center .block { max-width: 640px; }

  /* Botões um pouco maiores pra acompanhar o ecrã */
  .skip-anim { height: 44px; font-size: 12px; }
  .fab { height: 46px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════
   TELEMÓVEL (< 600px) — animação enxuta: só os TÍTULOS.
   Os parágrafos de apoio dos momentos narrativos são ocultados (o ecrã é
   pequeno e o texto longo polui/atrapalha a leitura durante o scroll); fica
   só o título principal, um pouco maior pra ganhar presença. Tablets (≥600px)
   mantêm o texto completo. Vem por último para vencer a cascata nesta faixa.
   ═══════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* Oculta os textos de apoio — mantém os títulos (h2 / h1.m1-title).
     M8 fica só com os 4 rótulos; M10 (lombada) é removido por completo.
     M2 é a EXCEÇÃO: recupera o parágrafo (regra mais abaixo). */
  .moment.m1-dual .m1-right-block p,
  .moment[data-momento="3"] .block p,
  .moment.on-page .block p,
  .moment.m7-shifted .block p,
  .moment.specs.m8-grid .block p.small,
  .moment.specs.m10-pair .block {
    display: none;
  }

  /* Títulos um pouco maiores, já que agora ficam sozinhos */
  .moment h2 { font-size: clamp(27px, 7.4vw, 38px); margin-bottom: 0; }
  .moment.m1-dual .m1-title { font-size: clamp(34px, 9.4vw, 50px); }

  /* ① "Um caderno para toda a vida" → desce um pouco */
  .moment.m1-dual .m1-title-block { top: calc(var(--safe-top) + 6vh); }

  /* ② "No meio do dia, um lugar para pensar" → sobe um pouco */
  .moment.m1-dual .m1-right-block { bottom: calc(var(--safe-bottom) + 6vh); }

  /* ③ "A VID começou assim" → alinhado à direita + recupera o parágrafo (só aqui) */
  .moment[data-momento="2"] .block {
    left: auto;
    right: 18px;
    transform: none;
    text-align: right;
    max-width: min(84vw, 380px);
  }
  .moment[data-momento="2"] h2 { text-align: right; }
  .moment.m2-justified p {
    display: block;
    text-align: right;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
  }

  /* ④ "Cada decisão pensada..." → centralizado na parte de cima */
  .moment[data-momento="3"] .block { top: var(--safe-top); bottom: auto; }

  /* ⑤ "O que você anota volta para você" → 3 linhas, fonte maior, 2ª linha a maior */
  .moment.on-page .block { width: auto; max-width: 88vw; }
  .moment.on-page h2 {
    font-size: clamp(21px, 6.2vw, 30px);
    line-height: 1.14;
    margin-bottom: 0;
  }
  .moment.on-page h2 span { display: block; white-space: nowrap; }
  .moment.on-page h2 .m5-emph { font-size: 1.4em; line-height: 1.04; }

  /* ⑥ "Feito para durar" → um pouco mais para baixo */
  .moment.m7-shifted .block { top: calc(var(--safe-top) + 7vh); }

  /* ⑦ M8: Capa/Formato descem · Miolo/Origem sobem (aproximam do centro) */
  .moment.specs.m8-grid .m8-capa,
  .moment.specs.m8-grid .m8-formato { top: calc(var(--safe-top) + 5vh); }
  .moment.specs.m8-grid .m8-miolo,
  .moment.specs.m8-grid .m8-origem { bottom: calc(var(--safe-bottom) + 5vh); }

  /* ⑨ "Enfim, um caderno para toda a vida…" → alinhado à esquerda, creme, sem
     halo, no espaço livre da esquerda (o caderno borrado fica à direita). */
  .moment.climax.climax-flow .climax-stage-1 {
    left: 22px;
    right: auto;
    transform: translateY(-50%);
    text-align: left;
    width: auto;
    max-width: 64vw;
  }
  .moment.climax.climax-flow .climax-tagline {
    text-align: left;
    color: var(--creme);
    text-shadow: none;
  }
}

/* ═══════════════════════════════════════════════
   Reduced motion / acessibilidade
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .moment { transition-duration: 0.01s; opacity: 1; transform: none; }
  .s1 .sub .arrow { animation: none; }
  .bg-stage { transition: none; }
  .moment.climax .climax-title,
  .moment.climax .climax-apoio,
  .moment.climax .climax-tagline { opacity: 1; transform: none; }
}