/* ==========================================================================
   DIA UM — Landing cinematográfica
   Tokens · base · componentes · 9 seções · utilidades de movimento
   Mobile-first. Breakpoints: 768 (tablet) · 1024 (desktop) · 1440 (amplo)
   ========================================================================== */

/* ---------- Fontes (self-hosted, subset latin) ---------- */
@font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-var-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Fallbacks com métricas aproximadas para reduzir deslocamento na troca de fonte */
@font-face { font-family: "Archivo Black Fallback"; src: local("Arial Black"), local("ArialMT-Black"), local("Arial Bold"); size-adjust: 97%; ascent-override: 90%; descent-override: 22%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 104%; ascent-override: 102%; descent-override: 28%; }

/* ---------- Tokens ---------- */
:root {
  --bg-primary: #080908;
  --bg-secondary: #141714;
  --bg-olive: #27342A;
  --gold-primary: #C99B43;
  --gold-highlight: #E4B659;
  --text-primary: #F0EEE5;
  --text-muted: #A8A99F;
  --ember: #B85D30;
  --divider: rgba(201, 155, 67, .18);
  --divider-strong: rgba(201, 155, 67, .42);
  --bg-rgb: 8, 9, 8;

  --font-display: "Archivo Black", "Archivo Black Fallback", "Arial Black", Impact, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero: min(clamp(2.45rem, 1.15rem + 5.2vw, 7rem), 11.5svh);
  --fs-h2: clamp(2.125rem, 1.35rem + 3.6vw, 5.5rem);
  --fs-h2-xl: clamp(2.4rem, 1.2rem + 4.6vw, 6.25rem);
  --fs-h3: clamp(1.45rem, 1.05rem + 1.55vw, 2.5rem);
  --fs-statement: clamp(1.9rem, 1.1rem + 3.3vw, 4.75rem);
  --fs-lead: clamp(1.0625rem, .97rem + .4vw, 1.3125rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.1875rem);
  --fs-micro: clamp(.6875rem, .66rem + .12vw, .8125rem);

  --gutter: clamp(20px, 4.6vw, 80px);
  --maxw: 1520px;
  --header-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --sticky-h: 0px;
  color-scheme: dark;
}
@media (min-width: 1024px) { :root { --header-h: 78px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-primary); scroll-padding-top: var(--header-h); }
body {
  margin: 0; min-height: 100vh; background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.62; font-weight: 450;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
main { display: block; overflow-x: clip; }
main:focus { outline: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ol, ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold-primary); color: var(--bg-primary); }
:focus-visible { outline: 2px solid var(--gold-highlight); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--gold-primary); color: var(--bg-primary); font-weight: 800; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.layer { position: absolute; inset: 0; }
.layer > img, .layer picture > img, .layer > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tipografia ---------- */
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: -.012em; font-kerning: normal; }
.h2 { font-size: var(--fs-h2); text-wrap: balance; }
.h2--xl { font-size: var(--fs-h2-xl); }
.hl { color: var(--gold-primary); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-primary); font-weight: 500; max-width: 38em; }
.prose p { color: var(--text-muted); max-width: 36em; }
.prose p:first-child { color: var(--text-primary); }
.mono { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(18px, 2.4vw, 28px); color: var(--gold-primary); }
.eyebrow::before { content: ""; flex: 0 0 28px; height: 1px; background: currentColor; opacity: .8; }

/* Máscaras de revelação tipográfica (geradas pelo JS) */
.ml { display: block; overflow: hidden; padding: .14em .06em .07em; margin: -.14em -.06em -.07em; }
.ml__i { display: inline-block; }
.w { display: inline; }

/* ---------- Botões ---------- */
.btn {
  --h: 56px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--h); padding: 0 clamp(22px, 2.2vw, 34px); border: 0; border-radius: 2px;
  font-family: var(--font-body); font-size: clamp(.875rem, .83rem + .18vw, 1rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .35s, color .35s, border-color .35s, box-shadow .45s var(--ease-out);
}
.btn__label { position: relative; z-index: 1; }
.btn__icon { position: relative; z-index: 1; flex: none; transition: transform .5s var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn[href^="#"]:hover .btn__icon { transform: translateY(3px); }
.btn--sm { --h: 44px; font-size: .75rem; padding: 0 18px; }
.btn--xl { --h: 64px; font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem); }
.btn--block { width: 100%; }
.btn--gold {
  color: #0d0c09;
  background: linear-gradient(180deg, #D8AC55 0%, var(--gold-primary) 46%, #B88A37 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 196, .55), inset 0 -1px 0 rgba(60, 40, 8, .35), 0 18px 40px -18px rgba(201, 155, 67, .55);
}
.btn--gold:hover { background: linear-gradient(180deg, #EDC56C 0%, var(--gold-highlight) 46%, #C99B43 100%); box-shadow: inset 0 1px 0 rgba(255, 244, 214, .7), inset 0 -1px 0 rgba(60, 40, 8, .3), 0 22px 50px -16px rgba(228, 182, 89, .65); }
.btn--gold:active { background: linear-gradient(180deg, #C2953F, #A87C2F); box-shadow: inset 0 2px 6px rgba(40, 26, 4, .45); }
.btn--line { color: var(--gold-highlight); background: rgba(var(--bg-rgb), .35); box-shadow: inset 0 0 0 1px var(--divider-strong); }
.btn--line:hover { color: var(--bg-primary); background: var(--gold-highlight); box-shadow: inset 0 0 0 1px var(--gold-highlight); }
.btn--line:active { background: var(--gold-primary); }
/* Reflexo metálico (golden light sweep) */
.btn--shine::before {
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 248, 225, 0) 0%, rgba(255, 248, 225, .6) 50%, rgba(255, 248, 225, 0) 100%);
  transform: translateX(0) skewX(-18deg); opacity: 0;
}
.btn--shine:hover::before, .btn--shine.is-glint::before { animation: btn-sweep 1.15s var(--ease-in-out); }
@keyframes btn-sweep { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }
/* Estado de carregamento visual: não bloqueia a navegação */
.btn__spinner { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid rgba(13, 12, 9, .25); border-top-color: #0d0c09; opacity: 0; z-index: 1; }
.btn.is-loading .btn__icon { opacity: 0; }
.btn.is-loading .btn__spinner { opacity: 1; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; height: 48px; padding: 0 14px;
  background: rgba(var(--bg-rgb), .5); border: 1px solid var(--divider-strong); border-radius: 2px; color: var(--text-primary); cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.icon-btn:hover { background: var(--gold-primary); border-color: var(--gold-primary); color: var(--bg-primary); }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--text-muted); border-color: var(--divider); }
.icon-btn--wide { padding: 0 18px; }

/* ---------- Atmosfera global ---------- */
.grain {
  position: fixed; inset: -10%; width: 120%; height: 120%; z-index: 80; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .grain { animation: grain 1.4s steps(5) infinite; }
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

.fog { position: absolute; left: 0; bottom: 0; height: 62%; width: calc(100% + 1600px); background: url("../img/fog.webp") repeat-x 0 100% / 1600px 100%; opacity: .32; pointer-events: none; will-change: transform; }
@media (prefers-reduced-motion: no-preference) { .fog { animation: fog-drift 110s linear infinite; } }
@keyframes fog-drift { to { transform: translate3d(-1600px, 0, 0); } }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

.topo { position: absolute; pointer-events: none; fill: none; stroke: var(--gold-primary); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .16; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.topo use { vector-effect: non-scaling-stroke; }

.hud { position: absolute; inset: 0; pointer-events: none; color: rgba(240, 238, 229, .55); }
.hud__item { position: absolute; font-size: 11px; letter-spacing: .18em; }

/* ---------- SiteHeader ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 70; height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); transition: transform .6s var(--ease-out), background-color .4s, box-shadow .4s; }
.site-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), .94), rgba(var(--bg-rgb), .86)); opacity: 0; transition: opacity .4s; box-shadow: 0 1px 0 var(--divider); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { position: relative; height: var(--header-h); display: flex; align-items: center; gap: 24px; max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand__mark { width: 34px; height: 34px; }
.brand__name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.brand__tag { color: var(--text-muted); font-size: 10px; padding-left: 12px; border-left: 1px solid var(--divider); display: none; }
.site-nav { display: none; }
.site-header__cta { display: none; }
.site-header__offer { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--gold-highlight); text-decoration: none; }
@media (min-width: 1024px) {
  .brand__tag { display: inline; }
  .site-nav { display: flex; gap: clamp(18px, 2.4vw, 40px); margin-left: auto; }
  .site-nav a { position: relative; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--text-muted); padding: 12px 0; transition: color .3s; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--gold-primary); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
  .site-nav a:hover { color: var(--text-primary); }
  .site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .site-header__cta { display: inline-flex; margin-left: 12px; }
  .site-header__offer { display: none; }
}

/* ==========================================================================
   01 · HERO — a família diante do amanhecer
   Retrato: texto no alto, cena vertical emergindo abaixo.
   Paisagem: cena full-bleed com a família à direita, texto à esquerda.
   ========================================================================== */
.hero {
  /* pontos de luz reais da imagem — o JS recalcula em px para cada recorte */
  --sun-x: 33.8%; --sun-y: 62%; --lan-x: 60%; --lan-y: 80%;
  --scene-w: min(125vw, 68svh);
  --scene-h: calc(var(--scene-w) * 1.7778);
  --fs-hero: clamp(2.05rem, 1.05rem + 4.6vw, 3.4rem);
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(var(--header-h) + clamp(22px, 5svh, 52px)) 0 calc(var(--scene-h) * .7);
}
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__scene {
  position: absolute; left: calc(50% - var(--scene-w) / 2); bottom: 0; width: var(--scene-w); aspect-ratio: 1080 / 1920;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.hero__parallax { position: absolute; inset: 0; }
.hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__lights { position: absolute; inset: 0; pointer-events: none; }
.hero__ambient { position: absolute; left: var(--sun-x); top: var(--sun-y); width: min(120vmin, 1100px); aspect-ratio: 1; translate: -50% -50%; opacity: .8;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .2), rgba(201, 120, 52, .09) 42%, rgba(184, 93, 48, 0) 72%); }
.hero__lantern { position: absolute; left: var(--lan-x); top: var(--lan-y); width: min(36vmin, 320px); aspect-ratio: 1; translate: -50% -50%; opacity: .7;
  background: radial-gradient(closest-side, rgba(255, 178, 92, .3), rgba(255, 140, 60, .1) 45%, rgba(255, 140, 60, 0) 76%); }
@media (prefers-reduced-motion: no-preference) {
  .hero.is-inview .hero__ambient { animation: hero-ambient 12s ease-in-out infinite alternate; }
  .hero.is-inview .hero__lantern { animation: hero-flicker 3.9s linear infinite; }
}
@keyframes hero-ambient { 0% { opacity: .62; transform: translate(-1.5%, 1%) scale(.97); } 100% { opacity: .95; transform: translate(1.5%, -1%) scale(1.05); } }
@keyframes hero-flicker { 0% { opacity: .62; } 11% { opacity: .78; } 19% { opacity: .66; transform: scale(1.03); } 33% { opacity: .85; } 45% { opacity: .7; } 57% { opacity: .8; transform: scale(.98); } 71% { opacity: .64; } 86% { opacity: .82; } 100% { opacity: .62; transform: scale(1); } }
.hero .fog { height: 26%; bottom: 4%; opacity: .14; }
.hero__veil { position: absolute; inset: 0; --r: 0%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0) var(--r), rgba(var(--bg-rgb), .985) calc(var(--r) + 38%)); }
.intro .hero__veil { opacity: 1; }
.hero__outro { background: var(--bg-primary); opacity: 0; pointer-events: none; }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 14%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .6) 0%, rgba(var(--bg-rgb), 0) 12%); }

.hud--hero .hud__item--tl { left: var(--gutter); top: calc(var(--header-h) + 22px); }
.hud--hero .hud__item--tr { right: var(--gutter); top: calc(var(--header-h) + 22px); }
.hud--hero .hud__item--bl { left: var(--gutter); bottom: 34px; }
.hud__ruler { position: absolute; left: calc(var(--gutter) * .42); top: 30%; height: 40%; width: 9px;
  background: repeating-linear-gradient(180deg, rgba(201, 155, 67, .55) 0 1px, transparent 1px 12px), linear-gradient(90deg, rgba(201, 155, 67, .35) 1px, transparent 1px); }
.hud--hero .hud__item--tl, .hud--hero .hud__item--tr, .hud--hero .hud__item--bl, .hud--hero .hud__ruler { display: none; }

.hero__content { position: relative; z-index: 2; }
.hero__copy { max-width: 40rem; }
.hero__title { font-size: var(--fs-hero); line-height: .92; margin-bottom: clamp(16px, 2.6svh, 30px); }
.hero__title:focus { outline: none; }
.hero__title-a, .hero__title-b { display: block; text-wrap: balance; }
.hero__title-a { color: var(--text-primary); }
/* a pergunta final tem máscara própria (reveal de baixo para cima) */
.hero__title-b { overflow: hidden; padding: .14em .06em .06em; margin: -.06em -.06em -.06em; }
.hero__title-b-in { display: block; color: var(--gold-primary); }
.hero__title-b-in.is-sweep {
  background: linear-gradient(100deg, var(--gold-primary) 0%, var(--gold-primary) 40%, #F3DDA2 50%, var(--gold-primary) 60%, var(--gold-primary) 100%) 100% 0 / 280% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { color: var(--text-primary); max-width: 34em; margin-bottom: 18px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--gold-highlight); margin-bottom: clamp(22px, 3.4svh, 36px); }
.hero__meta span[aria-hidden] { color: var(--gold-primary); opacity: .7; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.scroll-cue { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); text-decoration: none; font-size: 10px; padding: 6px 10px; min-height: 44px; }
.scroll-cue__track { position: relative; width: 1px; height: 34px; background: rgba(201, 155, 67, .25); overflow: hidden; }
.scroll-cue__dot { position: absolute; left: -1px; top: 0; width: 3px; height: 10px; background: var(--gold-highlight); }
@media (prefers-reduced-motion: no-preference) { .scroll-cue__dot { animation: cue 2.2s var(--ease-in-out) infinite; } }
@keyframes cue { 0% { transform: translateY(-12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
.scroll-cue { display: none; }

@media (orientation: portrait) and (min-width: 600px) {
  .hero__copy { max-width: 46rem; }
}
/* Paisagem (desktop, notebook, tablet deitado, celular deitado) */
@media (orientation: landscape) {
  .hero {
    --sun-x: 58.9%; --sun-y: 31%; --lan-x: 77.6%; --lan-y: 66%;
    --wrap-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
    --hero-copy-w: max(280px, calc(52vw - var(--wrap-left)));
    --fs-hero: min(calc(var(--hero-copy-w) / 10.9), 6rem, 10svh);
    justify-content: center; padding: calc(var(--header-h) + 4svh) 0 clamp(80px, 11svh, 132px);
  }
  /* a cena ocupa a primeira tela; em telas baixas o texto continua abaixo, sobre o escuro */
  .hero__scene {
    inset: 0 0 auto 0; height: 100svh; width: auto; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 6%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 6%, #000 80%, transparent 100%);
  }
  .hero__parallax { scale: 1.03; }
  .hero__img { object-position: 100% 25%; }
  .hero .fog { height: 40%; bottom: 0; opacity: .16; }
  .hero__shade { background:
      linear-gradient(90deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .78) 30%, rgba(var(--bg-rgb), .3) 46%, rgba(var(--bg-rgb), 0) 58%),
      linear-gradient(0deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 24%),
      linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 16%); }
  .hero__copy { width: var(--hero-copy-w); max-width: none; }
  .hero__sub { max-width: min(31em, 100%); }
  .scroll-cue { display: flex; }
}
/* Telas mais quadradas que 16:10: a cena ocupa toda a largura e ancora embaixo (ninguém é cortado) */
@media (orientation: landscape) and (max-aspect-ratio: 16/10) {
  .hero__scene { top: calc(100svh - 56.25vw); height: auto; aspect-ratio: 16 / 9; }
}
@media (orientation: landscape) and (min-width: 1024px) {
  .hud--hero .hud__item--tl, .hud--hero .hud__item--tr, .hud--hero .hud__item--bl, .hud--hero .hud__ruler { display: block; }
}

/* Estado inicial da sequência de ativação (somente com JS + movimento permitido) */
.intro [data-intro], .intro [data-intro-title], .intro .site-header, .intro .hud--hero, .intro [data-hero-scene], .intro [data-hero-lights] { opacity: 0; }

/* ==========================================================================
   Padrão "cena": palco fixo (sticky) + conteúdo rolando por cima
   ========================================================================== */
.scene { position: relative; isolation: isolate; }
.scene__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: -1; }
.scene__body { position: relative; margin-top: -100svh; }
.block { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: clamp(96px, 16svh, 180px) clamp(72px, 12svh, 140px); }
.col { max-width: 40rem; }
@media (min-width: 1024px) {
  .block { justify-content: center; }
  .col { max-width: min(46vw, 44rem); }
}

/* ==========================================================================
   02 · A REALIDADE
   ========================================================================== */
.reality__img img { object-position: 50% 50%; }
.reality .fog--city { height: 70%; bottom: -6%; opacity: .2; }
.reality__cold { background: linear-gradient(180deg, rgba(28, 38, 44, .55), rgba(16, 22, 26, .75)); opacity: 0; }
.reality__shade { background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), .45) 18%, rgba(var(--bg-rgb), .35) 40%, rgba(var(--bg-rgb), .86) 72%, var(--bg-primary) 100%); }
.reality__veil, .reality__end { background: var(--bg-primary); opacity: 0; }
.reality__intro .h2 { margin-bottom: clamp(22px, 3svh, 36px); }
.reality__outro { gap: clamp(28px, 5svh, 56px); }
.statement { font-size: var(--fs-statement); max-width: 16ch; text-wrap: balance; margin: 0; }
.concerns { max-width: 920px; }
.concerns__label { color: var(--text-muted); margin: 0 0 14px; }
.concerns__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--divider-strong); }
.concerns__list li { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 0; color: var(--text-primary); border-bottom: 1px solid var(--divider); }
.concerns__list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 1px; background: var(--gold-highlight); }
.concerns__idx { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--divider-strong); color: var(--gold-primary); font-size: 10px; letter-spacing: 0; }
.diag { position: absolute; inset: 0; pointer-events: none; }
.diag__line { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(201, 155, 67, 0), rgba(201, 155, 67, .5), rgba(201, 155, 67, 0)); transform-origin: left; transform: scaleX(0); }
.diag__line:nth-child(1) { top: 24%; left: 52%; width: 40%; }
.diag__line:nth-child(2) { top: 38%; left: 58%; width: 32%; }
.diag__line:nth-child(3) { top: 54%; left: 46%; width: 46%; }
.diag__line:nth-child(4) { top: 66%; left: 62%; width: 26%; }
.no-js .diag__line, .reduced .diag__line { transform: scaleX(1); opacity: .5; }
@media (min-width: 768px) { .concerns__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .reality__img img { object-position: 64% 50%; }
  .reality__shade { background:
      linear-gradient(90deg, rgba(var(--bg-rgb), .94) 0%, rgba(var(--bg-rgb), .78) 30%, rgba(var(--bg-rgb), .2) 58%, rgba(var(--bg-rgb), .3) 100%),
      linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 20%, rgba(var(--bg-rgb), 0) 70%, var(--bg-primary) 100%); }
  .reality__cold { mix-blend-mode: color; background: #1b2429; }
  .reality__outro { justify-content: flex-end; padding-bottom: 14svh; }
}

/* ==========================================================================
   03 · A PREPARAÇÃO
   ========================================================================== */
.prep { position: relative; isolation: isolate; padding-bottom: clamp(96px, 16svh, 200px); }
.prep__media { position: relative; height: min(118vw, 74svh); margin-bottom: calc(min(118vw, 74svh) * -.34); z-index: -1; }
.prep__sticky { position: absolute; inset: 0; overflow: hidden; }
.prep__img img { object-position: 50% 50%; }
.prep__dim { background: linear-gradient(180deg, rgba(14, 18, 20, .7), rgba(var(--bg-rgb), .55)); }
.prep__shade { background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 22%, rgba(var(--bg-rgb), .1) 55%, var(--bg-primary) 96%); }
.topo--prep { inset: -10% -20%; width: 140%; height: 120%; opacity: .12; }
.prep__body { position: relative; }
.prep__col > .lead { margin-top: clamp(20px, 3svh, 32px); }
.steps { position: relative; margin: clamp(36px, 6svh, 64px) 0; }
.steps__rail { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--divider); }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-highlight), var(--gold-primary)); transform-origin: 50% 0; }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 18px 0; }
.step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; background: var(--bg-primary); border: 1px solid var(--divider-strong); color: var(--gold-primary); letter-spacing: .06em; transition: border-color .5s, color .5s, box-shadow .6s var(--ease-out); }
.step__title { font-family: var(--font-body); font-weight: 800; font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; margin: 9px 0 8px; }
.step__text { color: var(--text-muted); margin: 0; max-width: 32em; }
.step__body { transition: opacity .6s var(--ease-out); }
.motion .step:not(.is-lit) .step__body { opacity: .38; }
.motion .step:not(.is-lit) .step__num { color: var(--text-muted); border-color: var(--divider); }
.step.is-lit .step__num { border-color: var(--gold-primary); color: var(--gold-highlight); box-shadow: 0 0 0 5px rgba(201, 155, 67, .08), 0 0 24px rgba(201, 155, 67, .25); }
.prep__close { font-size: var(--fs-statement); max-width: 18ch; text-wrap: balance; margin: 0; }
@media (min-width: 1024px) {
  .prep { padding-top: clamp(80px, 12svh, 160px); }
  .prep__media { position: absolute; inset: 0 0 0 auto; width: 58%; height: auto; margin: 0; }
  .prep__sticky { position: sticky; inset: auto; top: 0; height: 100svh; }
  .prep__img img { object-position: 38% 50%; }
  .prep__shade { background:
      linear-gradient(90deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), .35) 26%, rgba(var(--bg-rgb), 0) 50%),
      linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 18%, rgba(var(--bg-rgb), 0) 80%, var(--bg-primary) 100%); }
  .prep__col { max-width: min(46vw, 42rem); }
  .prep__close { margin-top: 12svh; }
}

/* ==========================================================================
   Livro 3D (capa real) — usado na revelação e na oferta
   ========================================================================== */
.book { --bw: 230px; --bh: calc(var(--bw) * 1.4108); --bd: calc(var(--bw) * .075); position: relative; width: var(--bw); height: var(--bh); perspective: 1700px; perspective-origin: 50% 40%; }
.book__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(5deg); }
.book__face { position: absolute; }
.book__cover { inset: 0; transform: translateZ(calc(var(--bd) / 2)); background: #F2F1EC; overflow: hidden; border-radius: 1px 3px 3px 1px; }
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .06) 3.5%, rgba(255, 255, 255, .08) 5%, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 62%, rgba(201, 155, 67, .16) 100%),
              linear-gradient(180deg, rgba(255, 240, 210, .06), rgba(0, 0, 0, .1)); }
.book__gloss { --g: .35; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) calc(var(--g) * 100% - 28%), rgba(255, 246, 225, .75) calc(var(--g) * 100%), rgba(255, 255, 255, 0) calc(var(--g) * 100% + 24%)); }
.book__shade { position: absolute; inset: 0; background: #060606; opacity: var(--shade, 0); pointer-events: none; }
.book__back, .book__spine, .book__fore, .book__top, .book__bottom { box-shadow: inset 0 0 0 999px rgba(6, 6, 6, var(--shade, 0)); }
.book__back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); background: #E6E3DA; }
.book__spine { top: 0; height: 100%; left: calc(50% - var(--bd) / 2); width: var(--bd); transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); background: linear-gradient(90deg, #cfcbc0, #efede6 45%, #dcd8ce); }
.book__fore { top: 3px; height: calc(100% - 6px); left: calc(50% - var(--bd) / 2); width: var(--bd); transform: rotateY(90deg) translateZ(calc(var(--bw) / 2 - 3px));
  background: repeating-linear-gradient(90deg, #f1ecdf 0 1px, #d9d1bd 1px 2px), #ece6d6; box-shadow: inset 0 0 0 999px rgba(6, 6, 6, var(--shade, 0)), inset 0 0 12px rgba(0, 0, 0, .18); }
.book__top, .book__bottom { left: 0; width: calc(100% - 3px); top: calc(50% - var(--bd) / 2); height: var(--bd); background: repeating-linear-gradient(0deg, #f1ecdf 0 1px, #d6cdb8 1px 2px); }
.book__top { transform: rotateX(90deg) translateZ(calc(var(--bh) / 2 - 2px)); }
.book__bottom { transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2 - 2px)); }
.book__shadow { position: absolute; left: -6%; right: -30%; bottom: -7%; height: 14%; background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); transform: skewX(-28deg); filter: blur(4px); }

/* ==========================================================================
   04 · PRODUCT REVEAL
   ========================================================================== */
.reveal { position: relative; isolation: isolate; background: var(--bg-primary); }
.reveal.is-scrub { height: 290svh; }
.reveal__stage { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
.reveal.is-scrub .reveal__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.reveal__bg { position: absolute; inset: 0; z-index: -1; }
.reveal__atmo { inset: 0 0 auto 0; height: 72svh; opacity: .6;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, #000 30%, transparent 78%); }
.reveal__atmo img { object-position: 78% 50%; }
.reveal__light { background: radial-gradient(ellipse 55% 42% at 50% 30%, rgba(228, 182, 89, .32), rgba(184, 93, 48, .12) 45%, rgba(184, 93, 48, 0) 75%); mix-blend-mode: screen; }
.reveal__dark { background: var(--bg-primary); opacity: 0; }
.reveal__floor { position: absolute; left: 50%; top: 52svh; width: 90vw; max-width: 760px; height: 22svh; translate: -50% 0; background: radial-gradient(ellipse at 50% 30%, rgba(201, 155, 67, .14), rgba(201, 155, 67, 0) 65%); }
.reveal__grid { position: relative; display: grid; gap: clamp(24px, 4svh, 48px); padding-block: calc(var(--header-h) + 3svh) clamp(64px, 10svh, 110px); }
.reveal__product { order: -1; display: grid; justify-items: center; gap: 22px; }
.reveal__product .book { --bw: clamp(168px, 46vw, 250px); }
.reveal__caption { color: var(--text-muted); font-size: 10px; margin: 6px 0 0; }
.reveal__sub { margin: clamp(18px, 3svh, 28px) 0 10px; }
.reveal__text { color: var(--text-muted); max-width: 34em; }
.indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(22px, 4svh, 40px) 0 clamp(26px, 4svh, 40px); border-top: 1px solid var(--divider-strong); }
.indicator { display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 18px 0; border-bottom: 1px solid var(--divider); }
.indicator:nth-child(odd) { border-right: 1px solid var(--divider); }
.indicator:nth-child(even) { padding-left: 16px; }
.indicator__num { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); line-height: .9; color: var(--gold-highlight); }
.indicator__num--icon { color: var(--gold-highlight); height: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); display: flex; align-items: center; }
.indicator__num--icon svg { width: auto; height: 82%; }
.indicator__label { color: var(--text-primary); font-size: 11px; }
@media (min-width: 1024px), (orientation: landscape) and (min-width: 700px) and (max-height: 620px) {
  .reveal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 4vw; padding-block: calc(var(--header-h) + 2svh) 4svh; }
  .reveal__product { order: 0; }
  .reveal__product .book { --bw: min(24vw, 46svh, 400px); }
  .reveal__atmo { inset: 0 0 0 38%; height: auto; opacity: .7;
    -webkit-mask-image: radial-gradient(ellipse 62% 66% at 62% 50%, #000 32%, transparent 80%); mask-image: radial-gradient(ellipse 62% 66% at 62% 50%, #000 32%, transparent 80%); }
  .reveal__atmo img { object-position: 70% 50%; }
  .reveal__light { background: radial-gradient(ellipse 34% 48% at 73% 50%, rgba(228, 182, 89, .34), rgba(184, 93, 48, .12) 48%, rgba(184, 93, 48, 0) 78%); }
  .reveal__floor { left: 73%; top: 64%; width: 46vw; height: 30svh; }
}
@media (min-width: 1280px) {
  .indicators { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .indicator, .indicator:nth-child(even) { padding: 18px 16px; border-right: 1px solid var(--divider); }
  .indicator:first-child { padding-left: 0; }
  .indicator:last-child { border-right: 0; }
}

/* ==========================================================================
   05 · OS QUATRO PILARES
   ========================================================================== */
.pillars { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 640px); display: flex; touch-action: pan-y; }
.pillars__stage { position: absolute; inset: 0; z-index: -1; }
.pillars__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .8s var(--ease-out), visibility 0s .8s; }
.pillars__bg.is-active { visibility: visible; opacity: 1; transition: opacity .8s var(--ease-out); }
.pillars__bg img { width: 100%; height: 100%; object-fit: cover; }
.pillars__lights { position: absolute; inset: 0; z-index: 4; }
.pillars__light { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out); mix-blend-mode: screen; pointer-events: none; }
.pillars__light.is-active { opacity: 1; }
.pillars__light--fogo { background: radial-gradient(ellipse 55% 45% at 62% 60%, rgba(184, 93, 48, .35), rgba(184, 93, 48, 0) 70%); }
.pillars__light--agua { background: radial-gradient(ellipse 60% 50% at 55% 50%, rgba(120, 160, 170, .2), rgba(120, 160, 170, 0) 70%); }
.pillars__light--abrigo { background: radial-gradient(ellipse 60% 50% at 60% 45%, rgba(110, 130, 100, .22), rgba(39, 52, 42, 0) 70%); }
.pillars__light--comida { background: radial-gradient(ellipse 55% 45% at 58% 55%, rgba(201, 155, 67, .26), rgba(201, 155, 67, 0) 70%); }
.embers--pillar { z-index: 5; }
.pillars__shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), .55) 22%, rgba(var(--bg-rgb), .08) 42%, rgba(var(--bg-rgb), .55) 60%, rgba(var(--bg-rgb), .96) 82%, var(--bg-primary) 100%); }
.pillars__inner { position: relative; width: 100%; display: flex; flex-direction: column; padding-block: clamp(84px, 13svh, 150px) clamp(28px, 5svh, 56px); }
.pillars__head { margin-bottom: auto; }
.pillars__title { font-size: var(--fs-h2); }
.pw { transition: color .8s var(--ease-out); }
.pillars.is-enhanced .pw { color: rgba(240, 238, 229, .32); }
.pillars.is-enhanced .pw.is-active { color: var(--gold-primary); }
.pillars__lead { color: var(--text-muted); max-width: 30em; margin: clamp(14px, 2svh, 22px) 0 0; }
.pillars__panels { display: grid; margin-top: clamp(40px, 22svh, 260px); }
.pillar { grid-area: 1 / 1; max-width: 36rem; }
.pillar:focus-visible { outline-offset: 8px; }
.pillars.is-enhanced .pillar:not(.is-active) { visibility: hidden; opacity: 0; }
.pillars:not(.is-enhanced) .pillar { grid-area: auto; margin-bottom: 40px; }
.pillar__meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--gold-highlight); margin-bottom: 14px; }
.pillar__meta span + span { color: var(--text-muted); padding-left: 14px; border-left: 1px solid var(--divider-strong); }
.pillar__title { font-size: var(--fs-h3); line-height: .98; margin-bottom: 14px; text-wrap: balance; }
.pillar__text { color: var(--text-primary); margin: 0; max-width: 32em; }
.pillars__nav { margin-top: clamp(24px, 4svh, 40px); }
.pillars:not(.is-enhanced) .pillars__nav { display: none; }
.pillars__count { color: var(--text-muted); margin: 0 0 10px; }
.pillars__count span { color: var(--gold-highlight); }
.pillars__tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--divider-strong); }
.pillars__tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 56px; padding: 12px 6px 6px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text-muted); transition: color .35s; -webkit-tap-highlight-color: transparent; }
.pillars__tab:hover, .pillars__tab[aria-selected="true"] { color: var(--text-primary); }
.pillars__tab-num { font-size: 10px; color: var(--gold-primary); }
.pillars__tab-name { font-weight: 800; font-size: clamp(.75rem, .66rem + .5vw, 1.25rem); letter-spacing: .08em; text-transform: uppercase; }
.pillars__tab:focus-visible { outline-offset: -2px; }
.pillars__indicator { position: absolute; left: 0; top: -2px; height: 3px; width: 25%; background: var(--gold-highlight); box-shadow: 0 0 18px rgba(228, 182, 89, .6); transition: transform .7s var(--ease-out); }
.pillars[data-active="1"] .pillars__indicator { transform: translateX(100%); }
.pillars[data-active="2"] .pillars__indicator { transform: translateX(200%); }
.pillars[data-active="3"] .pillars__indicator { transform: translateX(300%); }
@media (min-width: 1024px) {
  .pillars { min-height: max(100svh, 720px); }
  .pillars__shade { background:
      linear-gradient(90deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .66) 30%, rgba(var(--bg-rgb), .05) 60%, rgba(var(--bg-rgb), .1) 100%),
      linear-gradient(0deg, rgba(var(--bg-rgb), .95) 0%, rgba(var(--bg-rgb), 0) 34%),
      linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 20%); }
  .pillars__inner { padding-block: calc(var(--header-h) + 7svh) 5svh; }
  .pillars__panels { margin-top: auto; padding-top: 6svh; }
  .pillars__tab { min-height: 76px; padding: 18px 16px 10px 0; }
  .pillars__tab-num { font-size: 11px; }
}

/* ==========================================================================
   06 · POR DENTRO DO MANUAL
   ========================================================================== */
.preview { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 14svh, 180px) clamp(88px, 12svh, 160px);
  background: radial-gradient(ellipse 70% 50% at 18% 0%, rgba(39, 52, 42, .55), rgba(39, 52, 42, 0) 70%), radial-gradient(ellipse 60% 40% at 90% 70%, rgba(39, 52, 42, .35), rgba(39, 52, 42, 0) 70%), var(--bg-primary); }
.topo--preview { inset: -5% -30% auto auto; width: 120%; height: 80%; z-index: -1; opacity: .13; }
.preview__head { display: grid; gap: clamp(22px, 4svh, 40px); }
.preview__head .prose { margin-top: 0; }
.levels { display: grid; margin-top: clamp(40px, 7svh, 72px); border-top: 1px solid var(--divider-strong); }
.level { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--divider); }
.level__bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; grid-row: span 2; align-self: start; margin-top: 4px; }
.level__bars i { width: 5px; background: rgba(201, 155, 67, .22); }
.level__bars i:nth-child(1) { height: 8px; } .level__bars i:nth-child(2) { height: 14px; } .level__bars i:nth-child(3) { height: 20px; }
.level__bars i.on { background: var(--gold-highlight); }
.level__name { color: var(--gold-highlight); font-size: 12px; margin: 0; }
.level__text { margin: 0; color: var(--text-muted); font-size: .95em; }
.gallery { position: relative; margin-top: clamp(56px, 9svh, 110px); }
.gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gallery__label { color: var(--text-muted); margin: 0; display: flex; gap: 18px; }
.gallery__count { color: var(--gold-highlight); }
.gallery__controls { display: flex; gap: 8px; }
.gallery__track {
  --page-w: clamp(232px, 70vw, 340px);
  display: flex; gap: clamp(14px, 3vw, 44px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: clamp(28px, 5svh, 56px) calc(50% - var(--page-w) / 2) clamp(16px, 3svh, 32px); scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -4px;
}
.gallery__track { position: relative; }
.gallery__track::-webkit-scrollbar { display: none; }
.page { flex: 0 0 var(--page-w); margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.page__frame { transform: perspective(1500px) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); transform-origin: 50% 50%; opacity: var(--o, 1); will-change: transform; }
.page__card { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #efe6d2; cursor: zoom-in; aspect-ratio: 1253 / 1768;
  box-shadow: 0 0 0 1px rgba(201, 155, 67, .22), 0 40px 70px -30px rgba(0, 0, 0, .9), 0 18px 30px -18px rgba(0, 0, 0, .7); }
.page__card img { width: 100%; height: 100%; object-fit: cover; }
.page__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .1)); }
.page__card:focus-visible { outline-offset: 4px; }
.page__cap { display: grid; gap: 4px; margin-top: 18px; opacity: var(--co, 1); transition: opacity .4s; }
.page__cap .mono { color: var(--gold-primary); font-size: 10px; }
.page__cap strong { font-weight: 800; font-size: 1rem; }
.page__detail { color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
.preview__statement { font-size: var(--fs-statement); margin: clamp(56px, 9svh, 110px) 0 0; max-width: 16ch; text-wrap: balance; }
@media (min-width: 768px) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level { padding: 26px 24px 26px 0; border-bottom: 0; }
  .level + .level { padding-left: 24px; border-left: 1px solid var(--divider); } }
@media (min-width: 1024px) {
  .preview__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: 6vw; }
  .gallery__track { --page-w: clamp(300px, 25vw, 420px); }
}

/* ==========================================================================
   07 · PARA QUEM É
   ========================================================================== */
.audience__img img { object-position: 60% 50%; }
.audience__cold { background: rgba(20, 28, 34, .5); }
.audience__warm { background: radial-gradient(ellipse 60% 60% at 70% 45%, rgba(228, 182, 89, .2), rgba(184, 93, 48, 0) 70%); mix-blend-mode: screen; opacity: .35; }
.audience__shade { background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), .4) 22%, rgba(var(--bg-rgb), .3) 45%, rgba(var(--bg-rgb), .88) 74%, var(--bg-primary) 100%); }
.audience__intro .lead { margin-top: clamp(20px, 3svh, 30px); }
@media (max-width: 1023px) { .audience__list { background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), .8) 12%, rgba(var(--bg-rgb), .88) 100%); } }
.profiles { display: grid; border-top: 1px solid var(--divider-strong); max-width: 1100px; }
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 3svh, 28px) 0; border-bottom: 1px solid var(--divider); }
.profile__num { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 3rem); color: var(--gold-primary); line-height: .85; min-width: 1.6em; }
.profile__title { font-family: var(--font-body); font-weight: 800; font-size: clamp(1rem, .92rem + .35vw, 1.25rem); letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; margin: 2px 0 8px; }
.profile p { color: var(--text-muted); margin: 0; }
.diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: clamp(32px, 6svh, 56px); color: var(--text-primary); }
.diff { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; line-height: 1.5; }
.diff__mark { flex: none; width: 9px; height: 9px; margin-top: 3px; border: 1px solid var(--gold-highlight); transform: rotate(45deg); }
@media (min-width: 1024px) {
  .audience__img img { object-position: 64% 50%; }
  .audience__shade { background:
      linear-gradient(90deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .84) 36%, rgba(var(--bg-rgb), .28) 60%, rgba(var(--bg-rgb), .22) 100%),
      linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 20%, rgba(var(--bg-rgb), 0) 76%, var(--bg-primary) 100%); }
  .audience__list .profiles, .audience__list .diffs { max-width: min(48vw, 800px); }
  .diffs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   08 · OFERTA
   ========================================================================== */
.offer { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 8svh, 120px) clamp(80px, 12svh, 160px); }
.offer__bg { position: absolute; inset: 0; z-index: -1; }
.offer__atmo { inset: 0 0 auto 0; height: 76svh; opacity: .75;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 50%, transparent 100%); }
.offer__atmo img { object-position: 34% 50%; }
.offer__light { background: radial-gradient(ellipse 60% 34% at 50% 30%, rgba(228, 182, 89, .26), rgba(184, 93, 48, .1) 50%, rgba(184, 93, 48, 0) 80%); mix-blend-mode: screen; }
.offer__shade { background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), .2) 16%, rgba(var(--bg-rgb), .45) 45%, var(--bg-primary) 72%); }
.offer__grid { display: grid; gap: clamp(28px, 5svh, 56px); }
.offer__product { display: grid; justify-items: center; gap: 26px; padding-top: clamp(40px, 8svh, 80px); }
.offer__product .book { --bw: clamp(170px, 44vw, 250px); }
.offer__caption { color: var(--text-muted); font-size: 10px; margin: 0; }
.offer__panel { position: relative; padding: clamp(28px, 4.4vw, 56px) clamp(22px, 4vw, 56px); background: linear-gradient(180deg, rgba(20, 23, 20, .94), rgba(var(--bg-rgb), .97)); box-shadow: 0 0 0 1px rgba(201, 155, 67, .2), 0 50px 100px -40px rgba(0, 0, 0, .9); }
.offer__panel::before { content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, rgba(228, 182, 89, 0) 35%, rgba(240, 206, 130, .95) 50%, rgba(228, 182, 89, 0) 65%) 120% 0 / 260% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) { .offer__panel.is-inview::before { animation: border-sweep 7s var(--ease-in-out) 1s infinite; } }
@keyframes border-sweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
.offer__panel::after { content: ""; position: absolute; inset: 10px; pointer-events: none;
  background:
    linear-gradient(var(--gold-primary), var(--gold-primary)) 0 0 / 14px 1px, linear-gradient(var(--gold-primary), var(--gold-primary)) 0 0 / 1px 14px,
    linear-gradient(var(--gold-primary), var(--gold-primary)) 100% 0 / 14px 1px, linear-gradient(var(--gold-primary), var(--gold-primary)) 100% 0 / 1px 14px,
    linear-gradient(var(--gold-primary), var(--gold-primary)) 0 100% / 14px 1px, linear-gradient(var(--gold-primary), var(--gold-primary)) 0 100% / 1px 14px,
    linear-gradient(var(--gold-primary), var(--gold-primary)) 100% 100% / 14px 1px, linear-gradient(var(--gold-primary), var(--gold-primary)) 100% 100% / 1px 14px;
  background-repeat: no-repeat; opacity: .7; }
.offer__panel .h2 { font-size: clamp(1.95rem, 1.25rem + 2.1vw, 3.4rem); }
.offer__sub { color: var(--text-primary); margin: clamp(16px, 2.4svh, 24px) 0 clamp(20px, 3svh, 28px); max-width: 30em; }
.checklist { display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text-primary); }
.checklist svg { width: 20px; height: 20px; margin-top: 3px; color: var(--gold-highlight); }
.price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 20px; margin: clamp(26px, 4svh, 36px) 0 clamp(20px, 3svh, 28px); padding-top: clamp(22px, 3svh, 30px); border-top: 1px solid var(--divider-strong); }
.price__main { margin: 0; font-family: var(--font-display); line-height: .82; color: var(--text-primary); }
.price__main > span[aria-hidden] { display: flex; align-items: flex-start; }
.price__cur { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); color: var(--gold-highlight); margin: .2em .3em 0 0; }
.price__int { font-size: clamp(4.5rem, 3.4rem + 4.4vw, 7.5rem); letter-spacing: -.035em; }
.price__dec { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); margin-top: .08em; }
.price__alt { margin: 0 0 .5em; color: var(--text-primary); font-size: 13px; }
.offer__note { margin: 16px 0 0; font-size: .8125rem; color: var(--text-muted); }
@media (min-width: 1024px) {
  .offer { padding-block: clamp(110px, 16svh, 200px); }
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); align-items: center; gap: 5vw; }
  .offer__product { padding-top: 0; min-height: 70svh; align-content: center; }
  .offer__product .book { --bw: min(22vw, 40svh, 340px); }
  .offer__atmo { inset: 0 auto 0 0; width: 60%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 96%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 40%, transparent 96%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); mask-composite: intersect; }
  .offer__atmo img { object-position: 30% 50%; }
  .offer__light { background: radial-gradient(ellipse 30% 48% at 28% 52%, rgba(228, 182, 89, .3), rgba(184, 93, 48, .1) 50%, rgba(184, 93, 48, 0) 80%); }
  .offer__shade { background: linear-gradient(90deg, rgba(var(--bg-rgb), .1) 0%, rgba(var(--bg-rgb), .3) 45%, rgba(var(--bg-rgb), .9) 70%), linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-rgb), 0) 18%, rgba(var(--bg-rgb), 0) 82%, var(--bg-primary) 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  .book--offer.is-inview .book__body { animation: book-float 8s ease-in-out infinite; }
}
@keyframes book-float { 0%, 100% { transform: rotateY(-24deg) rotateX(5deg) translateY(0); } 50% { transform: rotateY(-17deg) rotateX(3deg) translateY(-8px); } }

/* ==========================================================================
   09 · FAQ + ENCERRAMENTO
   ========================================================================== */
.faq { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(88px, 12svh, 160px); }
.topo--faq { inset: auto -20% 10% -20%; width: 140%; height: 70%; z-index: -1; opacity: .1; }
.faq__grid { display: grid; gap: clamp(28px, 5svh, 48px); }
.qa { border-top: 1px solid var(--divider); }
.qa:last-child { border-bottom: 1px solid var(--divider); }
.qa__q { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; padding: 18px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ""; }
.qa__num { color: var(--gold-primary); font-size: 11px; }
.qa__title { font-weight: 700; font-size: clamp(1rem, .94rem + .35vw, 1.25rem); line-height: 1.35; transition: color .3s; }
.qa__q:hover .qa__title { color: var(--gold-highlight); }
.qa__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--divider-strong); color: var(--gold-highlight); transition: transform .5s var(--ease-out), background-color .3s; }
.qa__icon svg { width: 16px; height: 16px; }
.qa[open] .qa__icon { transform: rotate(45deg); background: rgba(201, 155, 67, .12); }
.qa__a { padding: 0 52px 24px 38px; }
.qa__a p { margin: 0; color: var(--text-muted); max-width: 40em; }
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .qa::details-content { height: 0; overflow: clip; transition: height .5s var(--ease-out), content-visibility .5s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}
.closing { position: relative; isolation: isolate; margin-top: clamp(80px, 14svh, 180px); padding-block: clamp(110px, 20svh, 240px) clamp(96px, 14svh, 170px); text-align: center; overflow: hidden; }
.closing__bg { position: absolute; inset: 0; z-index: -1; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 100%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 70% 70% at 50% 100%, #000 20%, transparent 70%); }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 62%; }
.closing__inner { display: grid; justify-items: center; gap: clamp(32px, 5svh, 52px); }
.closing__title { font-size: clamp(2.3rem, 1.1rem + 5vw, 7rem); max-width: 13ch; margin: 0; text-wrap: balance; }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6vw; align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 48px); }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--divider); padding: 40px 0 calc(40px + var(--sticky-h) + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: 14px; }
.site-footer__tagline { margin: 0; color: var(--text-primary); }
.site-footer__note { margin: 0; color: var(--text-muted); font-size: .8125rem; max-width: 52em; }
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: auto 1fr; align-items: center; column-gap: 40px; } .site-footer__note { grid-column: 2; } }

/* ---------- MobileStickyCTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(var(--bg-rgb), .95); box-shadow: 0 -1px 0 var(--divider), 0 -20px 40px -10px rgba(0, 0, 0, .6);
  transform: translateY(110%); visibility: hidden; transition: transform .55s var(--ease-out), visibility 0s .55s; }
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .55s var(--ease-out); }
.sticky-cta__mark { width: 38px; height: 38px; flex: none; }
.sticky-cta .btn { --h: 52px; font-size: .875rem; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ---------- Lightbox ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(var(--bg-rgb), .97); color: var(--text-primary); display: none; flex-direction: column; overscroll-behavior: contain; }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px; border-bottom: 1px solid var(--divider); }
.lightbox__title { margin: 0; color: var(--gold-highlight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__actions { display: flex; gap: 8px; flex: none; }
.lightbox__view { flex: 1; overflow: auto; display: grid; place-items: center; padding: 16px; outline: none; }
.lightbox__img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 150px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transition: max-width .4s var(--ease-out); }
.lightbox.is-zoomed .lightbox__view { place-items: start center; }
.lightbox.is-zoomed .lightbox__img { max-height: none; max-width: none; width: min(1250px, 165vw); }
.lightbox__caption { margin: 0; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); color: var(--text-muted); font-size: .8125rem; border-top: 1px solid var(--divider); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Telas baixas: o HUD superior esquerdo cederia espaço ao eyebrow */
@media (min-width: 1024px) and (max-height: 820px) { .hud--hero .hud__item--tl { display: none; } }