/* =====================================================================
   OFICINA DOMINE OS ALIMENTOS COMPENSATÓRIOS — página de vendas
   Design system "Contorno" v1 (design-system.html).
   Regra-mãe: CONTORNO É DÚVIDA, PREENCHIMENTO É DOMÍNIO.
   Seções entram aqui na ordem da copy; cada uma tem seu bloco de CSS.
   ===================================================================== */

/* Fontes hospedadas aqui (subconjunto latin, cobre o português). Origem: Google Fonts, licença OFL. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. TOKENS ---------- */
:root {
  color-scheme: light;

  /* Cor — tirada do logo (tinta #1B1B1B e musgo #585F38) */
  --tinta:        #1B1B1B;  /* texto, contornos, "DOMINE" */
  --tinta-2:      #47473F;  /* texto secundário */
  --tinta-3:      #66665E;  /* rótulos, metadados (AA em papel e névoa) */
  --musgo:        #585F38;  /* "na prática": ação, preenchido, ênfase */
  --musgo-fundo:  #3E4326;  /* hover do botão, texto musgo pequeno */
  --musgo-linha:  #8E9468;  /* traços decorativos, nunca texto */
  --broto:        #E6E9D7;  /* tag de bônus, fundo de destaque */
  --papel:        #FFFFFF;  /* fundo A */
  --nevoa:        #F0F0EC;  /* fundo B — cinza-claro levemente quente */
  --fio:          #DCDCD4;  /* bordas finas, divisórias */
  --marca:        rgba(88, 95, 56, .22); /* marca-texto atrás de frase-chave */
  --sobre-musgo:  #FFFFFF;

  /* Tipografia */
  --f-display: "Anton", "Bebas Neue", Impact, sans-serif;           /* ecoa o DOMINE do logo */
  --f-texto:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* largura variável 62–125 */
  --f-voz:     "Source Serif 4", Georgia, "Times New Roman", serif;   /* só itálico: o pensamento dela */

  --fs-display: clamp(52px, 10.5vw, 128px);
  --fs-h1:      clamp(30px, 4.6vw, 52px);
  --fs-h2:      clamp(26px, 3.4vw, 40px);
  --fs-h3:      clamp(19px, 1.9vw, 22px);
  --fs-lede:    clamp(19px, 2.1vw, 23px);
  --fs-voz:     clamp(21px, 2.3vw, 27px);
  --fs-corpo:   18px;
  --fs-sm:      15px;
  --fs-xs:      13px;

  /* Espaço — base 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px;
  --secao-y: clamp(64px, 9vw, 120px);
  --gutter: 20px;
  --larg-max: 1080px;
  --larg-texto: 680px;

  /* Forma */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --contorno: 1.5px;  /* mesma espessura do traço do logo, proporcionalmente */
  --sombra-1: 0 1px 2px rgba(27,27,27,.06);
  --sombra-2: 0 18px 40px -22px rgba(27,27,27,.28);
  --sombra-print: 0 24px 48px -28px rgba(27,27,27,.45), 0 2px 6px rgba(27,27,27,.06);

  /* Movimento */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-rapido: 140ms;   /* hover, foco */
  --t-medio:  320ms;   /* marcação, troca de estado */
  --t-entrada: 800ms;  /* entrada na tela */
  --t-preenche: 1200ms;/* contorno → preenchido */
}

@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: var(--fs-corpo); line-height: 1.6;
  font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================
   PRIMITIVOS COMPARTILHADOS
   ===================================================================== */
.c-page { container: page / inline-size; background: var(--papel); color: var(--tinta); }

/* --- Tipografia utilitária --- */
.t-display { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-display); line-height: .9; letter-spacing: .005em; text-transform: uppercase; }
.t-h1 { font-weight: 800; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 90; margin: 0; text-wrap: balance; }
.t-h2 { font-weight: 800; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.012em; font-variation-settings: "wdth" 90; margin: 0; text-wrap: balance; }
.t-h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; margin: 0; }
.t-lede { font-weight: 500; font-size: var(--fs-lede); line-height: 1.45; margin: 0; text-wrap: pretty; }
.t-voz { font-family: var(--f-voz); font-style: italic; font-weight: 400; font-size: var(--fs-voz); line-height: 1.35; letter-spacing: -.005em; }
.t-rotulo { font-weight: 650; font-size: var(--fs-xs); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 72; color: var(--tinta-3); }
.t-num { font-family: var(--f-display); font-weight: 400; font-variant-numeric: tabular-nums; line-height: .9; }
.t-musgo { color: var(--musgo); }

/* --- Seção e trilhos --- */
.c-sec { padding: var(--secao-y) var(--gutter); }
.c-sec--papel { background: var(--papel); }
.c-sec--nevoa { background: var(--nevoa); }
.c-wrap { max-width: var(--larg-max); margin: 0 auto; }
.c-narrow { max-width: var(--larg-texto); margin: 0 auto; }
.c-sec__head { margin-bottom: var(--s-8); display: grid; gap: var(--s-3); }
.c-sec__head--center { text-align: center; justify-items: center; }
.c-sec__head > h2.t-rotulo { margin: 0; }

/* --- Marca-texto (frase-chave da promessa) --- */
.c-mark {
  background-image: linear-gradient(var(--marca), var(--marca));
  background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .08em;
}
.js .c-mark[data-in] { background-size: 0% 40%; transition: background-size 1100ms var(--ease-out) 250ms; }
.js .c-mark[data-in].is-in { background-size: 100% 40%; }

/* --- Contorno → preenchimento (ASSINATURA) --- */
.c-fill {
  position: relative; display: inline-block; padding-top: .16em; margin-top: -.16em; /* espaço p/ acentos (Í, Ó) */
  color: transparent; -webkit-text-stroke: var(--contorno) var(--tinta);
}
.c-fill::after {
  content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; padding-top: inherit;
  color: var(--musgo); -webkit-text-stroke: var(--contorno) var(--musgo);
  clip-path: inset(0 0 0 0);
}
.js .c-fill[data-in]::after { clip-path: inset(100% 0 0 0); transition: clip-path var(--t-preenche) var(--ease-inout) 200ms; }
.js .c-fill[data-in].is-in::after { clip-path: inset(0 0 0 0); }
.c-outline { color: transparent; -webkit-text-stroke: var(--contorno) var(--tinta); }

/* --- Entrada na tela (fade + sobe + desfoque) --- */
.js [data-in].c-reveal { opacity: 0; transform: translateY(24px); filter: blur(8px);
  transition: opacity var(--t-entrada) var(--ease-out), transform var(--t-entrada) var(--ease-out), filter var(--t-entrada) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-in].c-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* --- Botão de compra (único botão cheio da página) --- */
.c-btn {
  --beam-a: 0deg;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 18px 28px; border: 0; border-radius: var(--r-md);
  background: var(--musgo); color: var(--sobre-musgo); text-decoration: none; cursor: pointer;
  font-family: var(--f-texto); font-weight: 760; font-size: 17px; line-height: 1.15; letter-spacing: .045em; text-transform: uppercase;
  font-variation-settings: "wdth" 82; text-align: center; text-wrap: balance;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 14px 30px -16px rgba(62,67,38,.75);
  transition: background-color var(--t-rapido) ease, transform var(--t-rapido) ease;
}
.c-btn:hover { background: var(--musgo-fundo); }
.c-btn:active { transform: scale(.985); }
.c-btn__seta { width: 20px; height: 20px; flex: none; transition: transform var(--t-medio) var(--ease-out); }
.c-btn:hover .c-btn__seta { transform: translateX(4px); }
.c-btn--bloco { display: flex; width: 100%; }
/* feixe que percorre a borda — referência: animation-clean / border-beam */
.c-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--beam-a), transparent 0 70%, rgba(230,233,215,.0) 72%, #E6E9D7 84%, transparent 92%);
  -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);
  animation: c-beam 3.6s linear infinite;
}
.c-btn > * { position: relative; z-index: 1; }
@keyframes c-beam { to { --beam-a: 360deg; } }
.c-btn__brilho { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; pointer-events: none; }
.c-btn__brilho::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-18deg); }
.c-btn:hover .c-btn__brilho::after { animation: c-brilho 900ms var(--ease-out); }
@keyframes c-brilho { to { left: 130%; } }

/* link discreto (rodapé, WhatsApp) */
.c-link { display: inline-flex; align-items: center; gap: 8px; color: var(--musgo-fundo); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.c-link:hover { color: var(--tinta); }
.c-foot .c-link { min-height: 44px; }

/* --- Etiqueta --- */
.c-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-variation-settings: "wdth" 75; line-height: 1.4; white-space: nowrap; }
.c-tag--bonus { background: var(--broto); color: var(--musgo-fundo); }
.c-tag--contorno { border: var(--contorno) solid var(--tinta); color: var(--tinta); }

/* --- Ícone check (cheio = resolvido) --- */
.c-ico { width: 24px; height: 24px; flex: none; }
.c-check { width: 26px; height: 26px; border-radius: 50%; background: var(--musgo); color: #fff; display: grid; place-items: center; flex: none; }
.c-check svg { width: 15px; height: 15px; }

/* --- Vaga de imagem (até as imagens do ChatGPT chegarem) --- */
.c-slot {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--nevoa);
  border: var(--contorno) dashed var(--musgo-linha); display: grid; place-items: center; text-align: center; padding: var(--s-6);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(88,95,56,.06) 14px 15px);
}
.c-sec--nevoa .c-slot { background-color: var(--papel); }
.c-slot__txt { display: grid; gap: 6px; justify-items: center; max-width: 30ch; }
.c-slot__nome { font-weight: 700; font-size: 15px; }
.c-slot__meta { font-size: 13px; color: var(--tinta-3); }
.c-slot--4x5 { aspect-ratio: 4 / 5; }
.c-slot--1x1 { aspect-ratio: 1 / 1; }
.c-slot--4x3 { aspect-ratio: 4 / 3; }
.c-slot img.c-slot__ref { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; filter: grayscale(.15); }
.c-slot__selo { position: absolute; left: 12px; bottom: 12px; right: 12px; background: rgba(255,255,255,.94); border-radius: var(--r-md); padding: 10px 12px; text-align: left; font-size: 13px; line-height: 1.35; color: var(--tinta-2); }

/* ---------- BLOCO 1 · Dobra ---------- */
.c-hero { padding: clamp(28px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 104px); background: var(--papel); overflow-x: clip; }
.c-hero__grid { max-width: var(--larg-max); margin: 0 auto; display: grid; gap: var(--s-8); align-items: center; }
.c-hero__logo { width: min(100%, 440px); height: auto; }
.c-hero__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-6); }
.c-hero__lede { margin-top: var(--s-7); max-width: 34ch; }
.c-hero__lede strong { font-weight: 750; }
.c-hero__acao { margin-top: var(--s-8); display: grid; gap: var(--s-3); justify-items: start; }
.c-hero__nota { font-size: var(--fs-sm); color: var(--tinta-3); }
@container page (min-width: 760px) {
  .c-hero__grid { grid-template-columns: 1.08fr .92fr; gap: var(--s-10); }
}
/* telas largas: a composição de produto ganha mais espaço (texto ainda cabe: logo 440 px, botão 411 px) */
@container page (min-width: 1000px) {
  .c-hero__grid { grid-template-columns: .86fr 1.14fr; }
}

/* ---------- BLOCO 2 · Prova ---------- */
.c-proof { display: grid; gap: var(--s-7); }
.c-proof__col { display: grid; gap: var(--s-7); align-content: start; }
.c-print { margin: 0; display: grid; gap: var(--s-4); }
.c-print__img {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-print); background: var(--papel);
  cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%;
  transition: transform var(--t-medio) var(--ease-out);
}
.c-print__img:hover { transform: translateY(-3px); }
.c-print__img img { width: 100%; height: auto; }
.c-print__pull { margin: 0; padding-left: var(--s-4); border-left: 3px solid var(--musgo); color: var(--tinta); }
.c-print__fonte { font-size: 13px; color: var(--tinta-3); margin-top: 4px; font-style: normal; font-family: var(--f-texto); display: block; }
@container page (min-width: 760px) {
  .c-proof { grid-template-columns: 1fr 1.25fr; align-items: start; }
  .c-proof__col--b { padding-top: var(--s-10); }
}

/* ---------- Lightbox dos prints ---------- */
.c-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); max-height: 92vh; }
.c-lightbox::backdrop { background: rgba(27,27,27,.78); backdrop-filter: blur(4px); }
.c-lightbox img { max-height: 86vh; width: auto; margin: 0 auto; border-radius: var(--r-lg); }
.c-lightbox__fechar { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.c-lightbox__fechar svg { width: 20px; height: 20px; }

/* ---------- BLOCO 3 · Dor (pensamentos) ---------- */
.c-thoughts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.c-thought {
  position: relative; padding: var(--s-5) var(--s-6) var(--s-5) 56px; background: var(--nevoa);
  border-radius: var(--r-lg); color: var(--tinta); margin: 0;
}
.c-sec--nevoa .c-thought { background: var(--papel); }
.c-thought::before {
  content: "“"; position: absolute; left: 16px; top: 10px; font-family: var(--f-display); font-size: 56px; line-height: 1;
  color: transparent; -webkit-text-stroke: var(--contorno) var(--musgo-linha);
}
@container page (min-width: 760px) {
  .c-thoughts { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
  .c-thought:nth-child(even) { transform: translateY(var(--s-8)); }
  .js .c-thought.c-reveal[data-in]:nth-child(even):not(.is-in) { transform: translateY(calc(var(--s-8) + 24px)); }
  .js .c-thought.c-reveal[data-in]:nth-child(even).is-in { transform: translateY(var(--s-8)); }
}

/* ---------- BLOCO 4 · Virada dor → solução ---------- */
.c-turn { text-align: center; display: grid; justify-items: center; gap: var(--s-6); }
.c-turn__dor { max-width: 22ch; }
.c-turn__falta { font-weight: 600; font-size: var(--fs-lede); color: var(--tinta-2); margin: 0; }
.c-turn__mapa { font-size: clamp(48px, 9.4vw, 116px); max-width: 11ch; line-height: 1.08; }
.c-turn__def { max-width: 36ch; font-size: var(--fs-lede); font-weight: 500; line-height: 1.45; margin: 0; }
.c-turn__fecho { max-width: 32ch; margin: var(--s-4) 0 0; font-size: var(--fs-lede); line-height: 1.45; }
.c-turn__fecho strong { font-weight: 800; }

/* Mapa das 6 Naturezas: radar hexagonal, leve, direto sobre a seção (sem cartão nem moldura).
   Anéis e eixos em traço fino; a forma cresce do centro e cada marcador passa de contorno (dúvida)
   a preenchido (domínio) na ordem 1 → 6. Sem animação, tudo já chega pronto. */
.c-map { margin: var(--s-4) 0 0; width: min(100%, 300px); aspect-ratio: 220 / 248; }
.c-map__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c-map__aneis polygon { fill: none; stroke: rgba(27,27,27,.15); stroke-width: 1; }
.c-map__aneis polygon:last-child { stroke: var(--musgo-linha); }
.c-map__eixos line { stroke: rgba(27,27,27,.15); stroke-width: 1; }
.c-map__forma { fill: var(--musgo); fill-opacity: .28; stroke: var(--musgo); stroke-width: 1.6; stroke-linejoin: round; }
.c-map__disco { fill: var(--musgo); stroke: var(--musgo); stroke-width: 1; }
.c-map__n { font: 650 9.2px var(--f-texto); font-variation-settings: "wdth" 90; fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .c-map[data-in] .c-map__base { opacity: 0; transition: opacity 600ms ease; }
  .js .c-map[data-in] .c-map__forma { opacity: 0; transform: scale(.04); transform-origin: 110px 124px; transition: transform 1200ms var(--ease-out) 300ms, opacity 500ms ease 300ms; }
  .js .c-map[data-in] .c-map__disco { fill: var(--papel); stroke: var(--tinta); transition: fill var(--t-medio) ease, stroke var(--t-medio) ease; transition-delay: calc(900ms + var(--i) * 170ms); }
  .js .c-map[data-in] .c-map__n { fill: var(--tinta); transition: fill var(--t-medio) ease; transition-delay: calc(900ms + var(--i) * 170ms); }
  .js .c-map[data-in].is-in .c-map__base { opacity: 1; }
  .js .c-map[data-in].is-in .c-map__forma { opacity: 1; transform: none; }
  .js .c-map[data-in].is-in .c-map__disco { fill: var(--musgo); stroke: var(--musgo); }
  .js .c-map[data-in].is-in .c-map__n { fill: #fff; }
}

/* ---------- BLOCO 5 · Passo a passo (sequência real: 1 → 4) ---------- */
.c-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7); }
.c-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5); align-items: start; align-content: start; position: relative; }
/* trilho entre um passo e o próximo: fio por baixo, musgo por cima */
.c-step:not(:last-child)::before,
.c-step:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: calc(-1 * var(--s-7)); width: 2px; background: var(--fio); }
.c-step:not(:last-child)::after { background: var(--musgo); transform-origin: top; }
.js .c-steps[data-in] .c-step::after { transform: scaleY(0); transition: transform 380ms var(--ease-inout); transition-delay: calc(var(--i) * 420ms + 420ms); }
.js .c-steps[data-in].is-in .c-step::after { transform: scaleY(1); }
.c-step__n {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--musgo);
  border: var(--contorno) solid var(--musgo); font-family: var(--f-display); font-size: 26px; line-height: 1; color: #fff;
  transition: background-color var(--t-medio) ease, color var(--t-medio) ease, border-color var(--t-medio) ease;
}
.js .c-steps[data-in] .c-step__n { background: var(--papel); color: var(--tinta); border-color: var(--tinta); transition-delay: calc(var(--i) * 420ms + 200ms); }
.c-sec--nevoa .c-steps[data-in] .c-step__n { background: var(--nevoa); }
.js .c-steps[data-in].is-in .c-step__n { background: var(--musgo); color: #fff; border-color: var(--musgo); }
.c-step__titulo { font-weight: 750; font-size: var(--fs-h3); line-height: 1.3; margin: 12px 0 4px; }
.c-step__txt { margin: 0; color: var(--tinta-2); max-width: 44ch; }
@container page (min-width: 860px) {
  .c-steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  .c-step { grid-template-columns: 1fr; gap: var(--s-4); }
  .c-step:not(:last-child)::before,
  .c-step:not(:last-child)::after { left: 56px; right: calc(-1 * var(--s-6)); top: 27px; bottom: auto; width: auto; height: 2px; }
  .c-step:not(:last-child)::after { transform-origin: left; }
  .js .c-steps[data-in] .c-step::after { transform: scaleX(0); }
  .js .c-steps[data-in].is-in .c-step::after { transform: scaleX(1); }
  .c-step__titulo { margin-top: 0; }
}

/* ---------- BLOCO 6 · Tudo o que você vai receber ---------- */
.c-get { background: var(--papel); border-radius: var(--r-xl); border: 1px solid var(--fio); padding: clamp(20px, 4vw, 40px); box-shadow: var(--sombra-1); }
.c-get__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.c-get__item { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--fio); font-weight: 600; font-size: 18px; line-height: 1.35; }
.c-get__item:last-child { border-bottom: 0; }
.c-get__item--bonus { flex-wrap: nowrap; }
.c-get__item--bonus > span:last-child { min-width: 0; }
.c-get__bonus-ico { width: 26px; height: 26px; color: var(--musgo); flex: none; }
.c-get__nota { margin: var(--s-5) 0 0; padding: var(--s-4); background: var(--nevoa); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--tinta-2); line-height: 1.5; }

/* ---------- BLOCO 7 · Para quem é (checklist interativo) ---------- */
.c-fit__lead { margin: 0 0 var(--s-6); }
.c-fit__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.c-fit__op {
  position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-5);
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--r-lg); cursor: pointer;
  transition: border-color var(--t-rapido) ease, background-color var(--t-medio) ease;
}
.c-fit__op:hover { border-color: var(--tinta-3); }
.c-fit__op input { position: absolute; opacity: 0; pointer-events: none; }
.c-fit__caixa { width: 28px; height: 28px; border-radius: 7px; border: var(--contorno) solid var(--tinta); display: grid; place-items: center; margin-top: 2px; transition: background-color var(--t-medio) var(--ease-out), border-color var(--t-medio) ease; }
.c-fit__caixa svg { width: 16px; height: 16px; color: #fff; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--t-medio) var(--ease-out) 80ms; }
.c-fit__txt { font-size: 17px; line-height: 1.45; color: var(--tinta-2); }
.c-fit__txt q { quotes: "“" "”"; font-family: var(--f-voz); font-style: italic; font-size: 1.12em; color: var(--tinta); }
.c-fit__op:has(input:checked) { border-color: var(--musgo); background: var(--broto); }
.c-fit__op:has(input:checked) .c-fit__caixa { background: var(--musgo); border-color: var(--musgo); }
.c-fit__op:has(input:checked) .c-fit__caixa svg { stroke-dashoffset: 0; }
.c-fit__op:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 3px; }
.c-fit__placar { margin-top: var(--s-6); display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); border: var(--contorno) solid var(--tinta); background: var(--papel); transition: background-color var(--t-medio) ease, border-color var(--t-medio) ease, color var(--t-medio) ease; }
.c-fit__barra { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.c-fit__barra span { height: 8px; border-radius: 4px; border: var(--contorno) solid var(--tinta); transition: background-color var(--t-medio) ease, border-color var(--t-medio) ease; }
.c-fit__barra span.on { background: var(--musgo); border-color: var(--musgo); }
.c-fit__status { font-weight: 750; font-size: 15px; letter-spacing: .02em; }
.c-fit__regra { margin: 0; font-size: 17px; line-height: 1.5; }
.c-fit__placar.is-ok { background: var(--musgo); border-color: var(--musgo); color: #fff; }
.c-fit__placar.is-ok .c-fit__barra span { border-color: rgba(255,255,255,.7); }
.c-fit__placar.is-ok .c-fit__barra span.on { background: #fff; border-color: #fff; }

/* ---------- BLOCO 8 · Ancoragem ---------- */
.c-anchor { list-style: none; margin: 0; padding: 0; display: grid; }
.c-anchor__linha { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end; padding: var(--s-4) 0; border-bottom: 1px dashed var(--fio); }
.c-anchor__item { font-weight: 600; line-height: 1.4; }
.c-anchor__item small { display: block; font-weight: 400; font-size: 15px; color: var(--tinta-3); margin-top: 2px; }
.c-anchor__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-variation-settings: "wdth" 88; }
.c-anchor__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-5); font-weight: 600; font-size: var(--fs-lede); }
.c-risco { position: relative; display: inline-block; white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-risco::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 3px; background: var(--tinta); transform: rotate(-4deg) scaleX(1); transform-origin: left; border-radius: 2px; }
.js .c-risco[data-in]::after { transform: rotate(-4deg) scaleX(0); transition: transform 700ms var(--ease-inout) 500ms; }
.js .c-risco[data-in].is-in::after { transform: rotate(-4deg) scaleX(1); }

/* ---------- BLOCOS 9 e 12 · Preço + botão ---------- */
.c-offer { display: grid; gap: var(--s-8); align-items: center; }
@container page (min-width: 820px) { .c-offer { grid-template-columns: 1fr 1fr; gap: var(--s-10); } .c-offer--solo { grid-template-columns: minmax(0, 520px); justify-content: center; } }
@container page (min-width: 1000px) { .c-offer:not(.c-offer--solo) { grid-template-columns: 1.14fr .86fr; } }
.c-price { background: var(--papel); border: var(--contorno) solid var(--tinta); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); display: grid; gap: var(--s-5); box-shadow: var(--sombra-2); }
.c-price__hoje { font-weight: 600; font-size: 17px; margin: 0; }
.c-price__valor { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }
.c-price__x { font-weight: 750; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.1; padding-bottom: .5em; font-variation-settings: "wdth" 85; }
.c-price__num { font-family: var(--f-display); font-size: clamp(80px, 13vw, 128px); line-height: .82; color: var(--musgo); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.c-price__vista { margin: 0; font-weight: 600; font-size: 19px; color: var(--tinta-2); }
.c-price__vista b { color: var(--tinta); font-weight: 800; }
.c-trust { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--fio); display: grid; gap: 10px; }
.c-trust li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; color: var(--tinta-2); }
.c-trust svg { width: 18px; height: 18px; color: var(--musgo); flex: none; }

/* ---------- BLOCO 10 · Conversa séria ---------- */
.c-talk { display: grid; gap: var(--s-8); align-items: center; }
.c-talk__pergunta { margin: 0; color: var(--tinta); }
.c-talk__pergunta q { quotes: "“" "”"; color: var(--musgo-fundo); }
.c-talk__duas { margin: var(--s-7) 0 var(--s-4); font-weight: 700; }
.c-choice { display: grid; gap: var(--s-3); }
@container page (min-width: 620px) { .c-choice { grid-template-columns: 1fr 1.35fr; } }
.c-choice__op { border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; line-height: 1.45; }
.c-choice__op--a { border: var(--contorno) solid var(--tinta); color: var(--tinta-2); }
.c-choice__op--b { background: var(--musgo); color: #fff; box-shadow: var(--sombra-2); }
.c-choice__op--b .t-rotulo { color: rgba(255,255,255,.78); }
.c-choice__op p { margin: 0; font-weight: 600; font-size: 17px; }
.c-talk__fecho { margin: var(--s-8) 0 0; font-family: var(--f-display); font-size: clamp(34px, 4.6vw, 52px); line-height: 1; text-transform: uppercase; }

/* ---------- BLOCO 11 · Autoridade ---------- */
.c-author { display: grid; gap: var(--s-8); align-items: center; }
@container page (min-width: 820px) { .c-author { grid-template-columns: .9fr 1.1fr; gap: var(--s-10); } }
.c-author__txt { display: grid; gap: var(--s-5); }
.c-author__txt p { margin: 0; }
.c-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-3); }
.c-stat { padding: var(--s-5) 0 0; border-top: var(--contorno) solid var(--tinta); display: grid; gap: 6px; }
.c-stat__n { font-family: var(--f-display); font-size: clamp(48px, 7vw, 72px); line-height: .9; color: var(--musgo); font-variant-numeric: tabular-nums; }
.c-stat__r { font-size: 15px; line-height: 1.35; color: var(--tinta-2); font-weight: 500; }

/* Retrato recortado (sem fundo): base esmaecida, pois a foto termina na cintura */
.c-cutout {
  display: block; width: min(100%, 460px); height: auto; justify-self: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* ---------- BLOCO 13 · Perguntas ---------- */
.c-faq { display: grid; border-top: var(--contorno) solid var(--tinta); }
.c-faq details { border-bottom: 1px solid var(--fio); }
.c-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 32px; gap: var(--s-4); align-items: center; padding: var(--s-5) 0; font-weight: 700; font-size: 19px; line-height: 1.35; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq__ico { width: 32px; height: 32px; border-radius: 50%; border: var(--contorno) solid var(--tinta); display: grid; place-items: center; transition: background-color var(--t-medio) ease, border-color var(--t-medio) ease, transform var(--t-medio) var(--ease-out); }
.c-faq__ico svg { width: 16px; height: 16px; }
.c-faq details[open] .c-faq__ico { background: var(--musgo); border-color: var(--musgo); color: #fff; transform: rotate(45deg); }
.c-faq__resp { padding: 0 48px var(--s-5) 0; margin: 0; color: var(--tinta-2); }
.c-faq summary:hover { color: var(--musgo-fundo); }

/* ---------- BLOCO 14 · Rodapé ---------- */
.c-foot { padding: var(--s-9) var(--gutter) calc(var(--s-9) + 88px); background: var(--papel); border-top: 1px solid var(--fio); }
.c-foot__grid { max-width: var(--larg-max); margin: 0 auto; display: grid; gap: var(--s-6); justify-items: start; }
.c-foot__logo { width: 168px; }
.c-foot__legal { font-size: 14px; color: var(--tinta-3); line-height: 1.6; margin: 0; }
@container page (min-width: 760px) { .c-foot { padding-bottom: var(--s-9); } .c-foot__grid { grid-template-columns: auto 1fr auto; align-items: center; } }

/* ---------- Barra fixa de compra (só celular) ---------- */
.c-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio); display: grid; gap: 6px; transform: translateY(110%); transition: transform var(--t-medio) var(--ease-out);
}
.c-sticky.is-on { transform: none; }
.c-sticky__preco { font-size: 13px; text-align: center; color: var(--tinta-2); font-weight: 600; }
.c-sticky__preco b { color: var(--tinta); }
.c-sticky .c-btn { min-height: 52px; padding: 12px 16px; font-size: 15px; }
@media (min-width: 900px) { .c-sticky { display: none; } }

/* ---------- COMPOSIÇÕES · imagens A (dobra) e B (o "tudão") ----------
   Recortes com transparência (img/mockups/*.webp) montados em CSS, para
   cada objeto entrar e mexer sozinho. Posição/tamanho em % do palco; a
   sombra é CSS (os recortes não têm sombra); luz suave vinda da esquerda. */
.c-stage { position: relative; isolation: isolate; }  /* sem fundo: os objetos ficam soltos na seção */
.c-stage--a { aspect-ratio: 100 / 106; }  /* sem o cartão, o espaço vazio do topo foi cortado */
.c-stage__it {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); max-width: none; height: auto; z-index: var(--z, 1);
  pointer-events: none;   /* a sombra já está gravada em cada imagem (-s.webp): nada de CSS filter, que falha no Safari/iOS */
  translate: calc(var(--px, 0) * var(--depth, 0) * 1px) calc(var(--py, 0) * var(--depth, 0) * 1px);
  transition: translate 500ms var(--ease-out);
}
/* A · mockup do produto (dobra): mesma cena da imagem achatada, objeto a objeto */
.c-stage--a .c-stage__it--tablet    { --x: 1.80%;  --y: -0.30%; --w: 69.83%; --z: 1; --depth: 6;  --dx: 0;     --dy: 60px;  --rot: 0deg; }
.c-stage--a .c-stage__it--celular   { --x: 61.85%; --y: 18.69%; --w: 35.82%; --z: 2; --depth: 12; --dx: 60px;  --dy: 20px;  --rot: 6deg; }
.c-stage--a .c-stage__it--checklist { --x: -1.13%;  --y: 54.23%; --w: 65.81%; --z: 2; --depth: 10; --dx: -40px; --dy: -50px; --rot: -6deg; }
.c-stage--a .c-stage__it--caderno   { --x: 49.85%; --y: 55.22%; --w: 55.76%; --z: 2; --depth: 8;  --dx: 60px;  --dy: 30px;  --rot: 5deg; }
.c-stage--a .c-stage__it--caneta    { --x: 39.84%; --y: 64.69%; --w: 33.81%; --z: 4; --depth: 16; --dx: 30px;  --dy: 60px;  --rot: 14deg; }

/* B · o "tudão" (ao lado do preço): mesmo flat lay da imagem original, objeto a objeto */
.c-stage--b { aspect-ratio: 4 / 3; overflow-x: clip; }
.c-stage--b .c-stage__it--notebook  { --x: 4.83%;    --y: 2.12%;    --w: 54.82%;   --z: 1; --depth: 6;  --dx: -50px; --dy: 10px;  --rot: -3deg; }
.c-stage--b .c-stage__it--peticao   { --x: 52.84%;   --y: 3.15%;    --w: 46.81%;   --z: 1; --depth: 10; --dx: 40px;  --dy: -50px; --rot: 6deg; }
.c-stage--b .c-stage__it--tablet    { --x: 2.82%;    --y: 60.11%;   --w: 47.83%;   --z: 1; --depth: 8;  --dx: -40px; --dy: 50px;  --rot: -4deg; }
.c-stage--b .c-stage__it--checklist { --x: 40.84%;   --y: 58.15%;   --w: 32.32%; --z: 2; --depth: 12; --dx: 0;     --dy: 60px;  --rot: 5deg; }
.c-stage--b .c-stage__it--caderno   { --x: 64.81%;   --y: 56.11%;   --w: 30.34%; --z: 2; --depth: 8;  --dx: 40px;  --dy: 50px;  --rot: 6deg; }
.c-stage--b .c-stage__it--caneta    { --x: 85.65%; --y: 58.13%;   --w: 14.63%;  --z: 3; --depth: 16; --dx: 30px;  --dy: 30px;  --rot: 18deg; }

@media (prefers-reduced-motion: no-preference) {
  .js .c-stage[data-in] .c-stage__it {
    opacity: 0; transform: translate(var(--dx, 0), var(--dy, 24px)) rotate(var(--rot, 0deg)) scale(.96);
    transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out), translate 500ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 140ms + 150ms), calc(var(--i, 0) * 140ms + 150ms), 0ms;
  }
  .js .c-stage[data-in].is-in .c-stage__it { opacity: 1; transform: none; }
}

/* ---------- Movimento reduzido: tudo chega pronto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-in].c-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .c-fill[data-in]::after { clip-path: inset(0) !important; }
  .js .c-mark[data-in] { background-size: 100% 40% !important; }
}

/* Imagens A–D, nas proporções previstas pelo design system. */
.c-visual { display: block; width: 100%; height: auto; min-width: 0; border-radius: var(--r-lg); }