/* Página de pré-inscrição · Mapa do Ponto Cego
 * Consome ds/tokens.css e ds/ui-kit.css (copiados por montar.sh). Sem hex nem px crus:
 * valor que faltar vira token no repositório do design system. */

/* Fontes no próprio domínio: sem bloquear a renderização em outro servidor e sem enviar o IP da visitante ao Google.
 * As "Reserva" têm a métrica ajustada, para o texto não pular quando a fonte real chega. */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat Reserva"; src: local("Arial"); size-adjust: 112.13%; ascent-override: 86.33%; descent-override: 22.38%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Reserva"; src: local("Times New Roman"), local("Times"); size-adjust: 95.34%; ascent-override: 96.92%; descent-override: 30.1%; line-gap-override: 0%; }
:root {
  --font-sans: "Montserrat", "Montserrat Reserva", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant Reserva", Garamond, Georgia, serif;
}

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

/* Sombra e unidade da página. O DS só tem --shadow-none (a "caixa" das peças é sem sombra); na web
 * a sombra é feita do véu de Raiz, nunca de preto, como pede a regra de fotografia. Proposta a levar
 * ao repositório do design system se for aprovada. --u: o fio do DS é medido em px de 1080. */
.vp-root {
  --u: calc(var(--space-1) / 4);
  --sombra-suave: 0 var(--space-3) var(--space-8) calc(var(--space-3) * -1) var(--color-veu-16);
  --sombra-media: 0 var(--space-6) var(--space-12) calc(var(--space-5) * -1) var(--color-veu-38);
  --sombra-funda: 0 var(--space-8) var(--space-20) calc(var(--space-6) * -1) var(--color-veu-55);
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); }
img { display: block; max-width: 100%; height: auto; }

.vp-container { padding-inline: var(--space-4); }
.estreito { max-width: var(--size-container-md); }

/* ---------- Tipografia da página ---------- */
.marca { margin: var(--space-4) 0 var(--space-6); display: grid; gap: var(--space-1); }
.marca__nome {
  font-family: var(--font-sans); font-weight: var(--weight-extrabold);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.marca__edicao {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); line-height: var(--leading-voz);
  color: var(--text-secondary);
}
.voz {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); line-height: var(--leading-voz);
  margin: 0 0 var(--space-8); color: var(--text-onRaizSerif);
}
.titulo {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
  line-height: var(--leading-titulo); letter-spacing: var(--tracking-titulo);
  margin: var(--space-4) 0 var(--space-6);
}
.titulo--claro { color: var(--text-onRaiz); }
.subtitulo { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.intro { margin: 0 0 var(--space-10); font-size: var(--text-md); color: var(--text-secondary); }
.nota { margin-top: var(--space-6); color: var(--text-secondary); font-style: italic; }
.rotulo-claro { color: var(--text-onRaizSoft); }
.rotulo-dourado { color: var(--text-onRaizSerif); }
p { max-width: var(--measure-default); }

/* ---------- Seções ---------- */
.secao { padding-block: var(--section-md); }
.secao--clara { background: var(--surface-primary); }
.vp-on-raiz p, .vp-on-raiz li { color: var(--text-onRaiz); }
.vp-on-raiz .vp-fio { background: var(--surface-dourado); }
/* O contorno de foco do DS é Raiz: some sobre fundo Raiz. */
.vp-on-raiz :focus-visible { outline-color: var(--border-dourado); }

/* ---------- Topo ---------- */
.topo {
  position: relative; overflow: hidden;
  padding-block: var(--space-10) var(--section-md);
  background:
    radial-gradient(60% 70% at 88% 18%, color-mix(in srgb, var(--surface-dourado) 38%, transparent), transparent 70%),
    radial-gradient(50% 60% at 4% 96%, color-mix(in srgb, var(--surface-nevoa) 24%, transparent), transparent 70%),
    var(--surface-page);
}
.topo__rotulo { display: block; margin-top: var(--space-4); color: var(--text-secondary); }
.topo__grade { display: grid; gap: var(--space-10); align-items: center; }
.topo__gancho { font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); line-height: var(--leading-voz); margin: 0 0 var(--space-4); }
.topo__promessa { font-size: var(--text-lg); line-height: var(--leading-snug); margin: 0 0 var(--space-4); }
.topo__apoio { color: var(--text-secondary); margin: 0 0 var(--space-8); }
.sem-custo { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.topo__exclusiva { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: var(--leading-snug); }

.topo__foto picture { display: block; }
.topo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }

/* ---------- O mapa da capacidade, na seção do método (desenho da Viviane, 28/10) ----------
 * Junta o quadro dela às quatro esferas da mentoria de 27/10, sobre Raiz. O texto é real e as palavras são dela;
 * só "a diferença" é nossa. O estado final é o padrão: sem JS ou com movimento reduzido, nada fica pela metade.
 * --tpc-capacidade é a altura relativa da capacidade. */
.tpc { --tpc-capacidade: .46; --tpc-entra: 1400ms; --tpc-ease: cubic-bezier(.16, 1, .3, 1); margin: var(--space-10) 0; }
.tpc__miolo { container: tpc / inline-size; }
.tpc__cabeca { margin-bottom: var(--space-8); padding-top: var(--space-8); border-top: var(--border-hairline) solid var(--border-onRaiz); text-align: center; }
.vp-on-raiz .tpc__titulo { margin: 0 auto; max-width: none; font-family: var(--font-serif); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: var(--leading-display); color: var(--text-onRaizSerif); }
.vp-on-raiz .tpc__pergunta { margin: var(--space-2) auto 0; max-width: none; font-size: var(--text-md); line-height: var(--leading-snug); }
.tpc__fluxo { display: grid; gap: var(--space-5); }
.tpc__bloco { min-width: 0; }
.tpc__passo {
  margin: 0 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); text-transform: uppercase; color: var(--text-onRaizSerif);
}
.vp-on-raiz .tpc__sub { margin: calc(var(--space-2) * -1) 0 var(--space-4); font-size: var(--text-sm); }

.tpc__barras {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  height: calc(var(--space-20) * 2.4); padding-inline: var(--space-2);
  border-bottom: var(--border-thin) solid var(--text-onRaiz);
}
.tpc__coluna { position: relative; }
.tpc__barra { position: absolute; inset-inline: 0; bottom: 0; display: block; }
.tpc__barra--exige { height: 100%; background: var(--surface-dourado); transform-origin: bottom; }
.tpc__barra--capacidade { height: calc(var(--tpc-capacidade) * 100%); border: var(--border-thin) solid var(--text-onRaiz); border-bottom: 0; }
.tpc__barra--diferenca {
  bottom: calc(var(--tpc-capacidade) * 100%); height: calc((1 - var(--tpc-capacidade)) * 100%);
  display: grid; place-items: center; padding: var(--space-1);
  background: color-mix(in srgb, var(--surface-nevoa) 28%, transparent);
  border: var(--border-hairline) dashed var(--text-onRaiz); border-bottom: 0;
}
.tpc__rotulo-diferenca { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); line-height: 1; text-align: center; color: var(--text-onRaiz); }
.tpc__legendas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); padding-inline: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-snug); text-align: center; color: var(--text-onRaiz); }

.tpc__seta { display: block; width: var(--space-8); height: var(--space-8); margin-inline: auto; fill: none; stroke: var(--text-onRaizSerif); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tpc__seta path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.tpc__olho { display: block; width: var(--space-12); height: auto; margin-bottom: var(--space-2); overflow: visible; }
.tpc__olho-contorno { fill: none; stroke: var(--text-onRaiz); stroke-width: 1.5; }
.tpc__iris { fill: var(--surface-nevoa); }
.tpc__pupila { fill: var(--surface-raiz); }
.tpc__palpebra { transform-box: fill-box; transform-origin: center; }
.tpc__esferas { max-width: 19rem; margin: 0 auto var(--space-5); }

.tpc__dominios { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.tpc__dominios > div { padding-block: var(--space-3); border-top: var(--border-hairline) solid var(--border-onRaiz); }
.tpc__dominios dt { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-onRaizSerif); }
.tpc__dominios dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-onRaiz); }
.vp-on-raiz .tpc__nota { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-style: italic; color: var(--text-onRaizSerif); }

.tpc__opcoes { list-style: none; margin: 0; padding: 0; display: grid; }
.vp-on-raiz .tpc__opcoes li { padding-block: var(--space-4); border-top: var(--border-hairline) solid var(--border-onRaiz); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.vp-on-raiz .tpc__assinatura { margin: var(--space-6) 0 0; font-family: var(--font-serif); font-size: var(--text-xl); color: var(--text-onRaizSerif); }

/* Com largura, volta ao desenho dela: três colunas, ligadas pelas setas */
@container tpc (min-width: 54rem) {
  .tpc__fluxo { grid-template-columns: minmax(0, .95fr) auto minmax(0, 1.35fr) auto minmax(0, .8fr); gap: var(--space-5); align-items: start; }
  .tpc__seta { transform: rotate(-90deg); margin-top: calc(var(--space-20) * 1.6); }
  .tpc__barras { height: calc(var(--space-20) * 3.2); }
  .vp-on-raiz .tpc__titulo { font-size: var(--text-4xl); }
}

/* O momento da página: o que a mudança exige cresce além do que cabe, e só depois se procura o porquê.
 * Toca uma vez, quando as barras entram na tela (.tpc--toca, ver pagina.js). */
.js-tpc .tpc:not(.tpc--toca) .tpc__barra--exige { transform: scaleY(var(--tpc-capacidade)); }
.js-tpc .tpc:not(.tpc--toca) .tpc__barra--diferenca { clip-path: inset(100% 0 0 0); }
.js-tpc .tpc:not(.tpc--toca) .tpc__bloco--procure,
.js-tpc .tpc:not(.tpc--toca) .tpc__bloco--escolha { opacity: .82; }
.js-tpc .tpc:not(.tpc--toca) .tpc__rotulo-diferenca { opacity: 0; }
.js-tpc .tpc:not(.tpc--toca) .tpc__palpebra { transform: scaleY(.1); }
.js-tpc .tpc:not(.tpc--toca) .tpc__seta path { stroke-dashoffset: 1; }

.tpc--toca .tpc__barra--exige { animation: tpc-cresce var(--tpc-entra) var(--tpc-ease) 300ms both; }
.tpc--toca .tpc__barra--diferenca { animation: tpc-abre var(--tpc-entra) var(--tpc-ease) 300ms both; }
.tpc--toca .tpc__rotulo-diferenca { animation: tpc-surge 500ms var(--motion-easing-standard) 1400ms both; }
.tpc--toca .tpc__seta--1 path { animation: tpc-traca 500ms var(--motion-easing-standard) 1900ms both; }
.tpc--toca .tpc__bloco--procure { animation: tpc-acende 600ms var(--motion-easing-standard) 2200ms both; }
.tpc--toca .tpc__palpebra { animation: tpc-olha 800ms var(--tpc-ease) 2200ms both; }
.tpc--toca .tpc__seta--2 path { animation: tpc-traca 500ms var(--motion-easing-standard) 2900ms both; }
.tpc--toca .tpc__bloco--escolha { animation: tpc-acende 600ms var(--motion-easing-standard) 3200ms both; }
@keyframes tpc-cresce { from { transform: scaleY(var(--tpc-capacidade)); } to { transform: scaleY(1); } }
@keyframes tpc-abre { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes tpc-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes tpc-traca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tpc-acende { from { opacity: .82; } to { opacity: 1; } }
@keyframes tpc-olha { from { transform: scaleY(.1); } to { transform: scaleY(1); } }

/* Moldura: um bloco de cor deslocado atrás da foto (dá profundidade sem sombra preta) */
.moldura { --desloc: var(--space-3); position: relative; margin: 0 var(--desloc) var(--desloc) 0; isolation: isolate; }
.moldura img { position: relative; box-shadow: var(--sombra-funda); }
.moldura::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--desloc) calc(var(--desloc) * -1) calc(var(--desloc) * -1) var(--desloc);
}
.moldura--dourado::before { background: var(--surface-dourado); }
.moldura--fio::before { border: var(--border-hairline) solid var(--border-dourado); }

/* Selo sobre a foto do topo: a "caixa" Raiz do DS, com o número na serifada Dourado */
.selo {
  position: absolute; left: 0; bottom: var(--space-8);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--surface-raiz) calc(var(--grade-caixa-opacidade) * 100%), transparent);
  color: var(--text-onRaiz); box-shadow: var(--sombra-funda); border-left: var(--border-fio) solid var(--border-dourado);
}
.selo__texto strong { font-size: var(--text-md); font-weight: var(--weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.selo__texto span { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-onRaizSerif); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--size-control-lg); padding: 0 var(--space-8);
  background: var(--action-primary); color: var(--action-primaryText);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-decoration: none; text-transform: uppercase;
  border: 0; border-radius: var(--radius-none); cursor: pointer;
  box-shadow: var(--sombra-media);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-normal) var(--motion-easing-standard),
              box-shadow var(--motion-duration-normal) var(--motion-easing-standard);
}
.botao:hover { color: var(--action-primaryHoverText); transform: translateY(calc(var(--space-1) * -0.5)); box-shadow: var(--sombra-funda); }
.botao[disabled] { background: var(--action-disabledBg); color: var(--action-disabledText); cursor: wait; }


/* ---------- Destaques do topo ---------- */
.destaques { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.destaques__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); background: var(--surface-primary);
  border: var(--border-hairline) solid var(--border-strong); box-shadow: var(--sombra-suave);
  font-size: var(--text-sm);
}
.destaques__item--forte { background: var(--surface-raiz); color: var(--text-onRaiz); border-color: var(--surface-raiz); }
.destaques__item--forte strong { color: var(--text-onRaizSerif); }
.selo .selo__numero {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: var(--text-6xl); line-height: var(--leading-none); color: var(--text-onRaizSerif);
}
.selo__texto { display: grid; gap: var(--space-1); align-content: center; }

/* ---------- O ponto cego entre as quatro esferas (mentoria de 27/10) ----------
 * Pedido da Viviane: círculos, e o ponto cego "pipocando" entre Corpo, Mente, Propósito e Ambiente,
 * porque ele pode estar em qualquer um. Sem valor nenhum: não é resultado de ninguém. Cor só por token.
 * Com menos movimento pedido, o ponto fica parado no centro, onde as quatro se tocam. */
.forca__texto { font-size: var(--text-md); }
.forca__convite { margin-top: var(--space-2); font-size: var(--text-md); }
.esferas { margin: var(--space-10) 0; display: grid; gap: var(--space-8); align-items: center; }
.esferas__quadro { width: 100%; max-width: 26rem; justify-self: center; }
.esferas__svg { display: block; width: 100%; height: auto; overflow: visible; }
.esf-orbita {
  fill: none; stroke: var(--surface-nevoa); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 3 7;
  transform-origin: 200px 200px; animation: esf-gira 90s linear infinite;
}
.esf {
  fill: var(--surface-dourado); fill-opacity: .12; stroke: var(--surface-dourado); stroke-width: 1.5;
  animation: esf-acende 8s var(--motion-easing-standard) infinite;
}
.esf--2 { animation-delay: 2s; }
.esf--3 { animation-delay: 4s; }
.esf--4 { animation-delay: 6s; }
.esf-rot { font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; fill: var(--text-onRaiz); }
.esf-cego { transform: translate(200px, 200px); animation: esf-pula 8s var(--motion-easing-standard) infinite; }
.esf-cego__halo { fill: var(--surface-nevoa); fill-opacity: .3; transform-box: fill-box; transform-origin: center; animation: esf-halo 2s ease-out infinite; }
.esf-cego__anel { fill: none; stroke: var(--text-onRaiz); stroke-width: 1.5; }
.esf-cego__ponto { fill: var(--surface-nevoa); }
@keyframes esf-gira { to { transform: rotate(360deg); } }
@keyframes esf-acende { 0% { fill-opacity: .12; } 5%, 20% { fill-opacity: .45; } 25%, 100% { fill-opacity: .12; } }
@keyframes esf-pula {
  0%, 18%   { transform: translate(200px, 134px); }
  25%, 43%  { transform: translate(302px, 232px); }
  50%, 68%  { transform: translate(200px, 338px); }
  75%, 93%  { transform: translate(98px, 232px); }
  100%      { transform: translate(200px, 134px); }
}
@keyframes esf-halo { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.esferas__pergunta { margin: 0 0 var(--space-5); font-family: var(--font-serif); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: var(--leading-voz); color: var(--text-onRaizSerif); }
.esferas__partes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.esferas__partes li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.esferas__partes .vp-icon { color: var(--text-onRaizSerif); margin-top: var(--space-1); }
.esferas__nota { margin: var(--space-5) 0 0; font-size: var(--text-sm); font-style: italic; }
.vp-on-raiz .esferas__nota { color: var(--text-onRaizSerif); }

/* ---------- Chamadas (botões no meio da página) ---------- */
.chamada { margin-top: var(--space-10); display: grid; gap: var(--space-3); justify-items: start; }
.chamada--centro { justify-items: center; text-align: center; margin-top: var(--space-12); }
.chamada__nota { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--text-muted); }
.botao--dourado { background: var(--action-secondary); color: var(--action-secondaryText); }
.botao--dourado:hover { color: var(--action-secondaryText); }

/* ---------- Passos: cartões com ícone, data e número ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.passo { position: relative; padding: var(--space-8) var(--space-6); border-top: var(--border-fio) solid var(--accent); }
.passo__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.passo__num { font-family: var(--font-serif); font-weight: var(--weight-light); font-size: var(--text-5xl); line-height: var(--leading-none); color: var(--surface-nevoa); }
.passo__quando {
  display: inline-block; padding: var(--space-1) var(--space-3); background: var(--surface-raiz); color: var(--text-onRaiz);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.passo h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.passo p { margin: 0; color: var(--text-secondary); }

/* ---------- Para quem é ---------- */
.intro--escura { color: var(--text-primary); margin-bottom: var(--space-6); }
.topicos__titulo { margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--text-muted); }
.topicos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.topicos li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding: var(--space-4) var(--space-5); background: var(--surface-page); border-left: var(--border-fio) solid var(--border-dourado);
}
.topicos .vp-icon { color: var(--text-primary); margin-top: var(--space-1); }

/* ---------- Redes ---------- */
.redes { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.redes .rede {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  color: var(--text-onRaiz); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  border: var(--border-hairline) solid var(--border-dourado);
  transition: background var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard);
}
.redes .rede:hover { background: var(--surface-dourado); color: var(--text-onDourado); }
.redes--rodape { justify-content: center; margin-top: var(--space-5); }
.redes--rodape .rede { padding: var(--space-2); border-radius: var(--radius-circle); }

/* ---------- Duas colunas ---------- */
.dupla { display: grid; gap: var(--space-10); align-items: center; }
.lista { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.foto-lateral { margin: 0; }
.foto-lateral img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto-lateral--retrato img { object-position: center 30%; }

/* ---------- Números ---------- */
.numeros { list-style: none; margin: var(--space-8) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-10); }
.numeros li { display: grid; gap: var(--space-1); align-content: start; max-width: 20ch; }
.numeros__valor {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: var(--text-5xl); line-height: var(--leading-none); color: var(--text-onRaizSerif);
}
.depoimentos-pendentes {
  margin-top: var(--space-8); padding: var(--space-6);
  border: var(--border-thin) dashed var(--border-onRaiz);
  color: var(--text-onRaizSoft); font-size: var(--text-sm); text-align: center;
}

/* ---------- Formulário ---------- */
.form { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.form.cartao { padding: var(--space-8) var(--space-6); }
.campo { display: grid; gap: var(--space-2); }
.campo label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"] {
  min-width: 0; width: 100%; min-height: var(--size-control-lg); padding: 0 var(--space-4);
  font: inherit; color: var(--text-primary); background: var(--surface-primary);
  border: var(--border-thin) solid var(--border-raiz); border-radius: var(--radius-none);
}
.campo--check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-3); }
.campo--check input { width: var(--size-icon-sm); height: var(--size-icon-sm); margin: var(--space-1) 0 0; accent-color: var(--action-primary); }
.campo--check label { font-weight: var(--weight-regular); }
.campo--check .campo__erro { grid-column: 2; }
.campo--oculto { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.campo__erro { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--feedback-errorText); }
.campo.com-erro input { border-color: var(--feedback-errorText); }
.campo__dica { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.campo--fone .vp-select { min-height: var(--size-control-lg); border: var(--border-thin) solid var(--border-raiz); }
.campo__rotulo-fone { margin-top: var(--space-3); }
.fone { display: grid; grid-template-columns: auto 1fr; }
.fone__ddi {
  display: grid; place-items: center; padding: 0 var(--space-4); min-width: var(--space-16);
  background: var(--surface-raiz); color: var(--text-onRaiz); font-weight: var(--weight-semibold);
}
.fone__ddi:empty { display: none; }
.fone:has(.fone__ddi:empty) { grid-template-columns: 1fr; }
.form__status { margin: 0; font-weight: var(--weight-semibold); min-height: var(--space-6); }
.form__status:focus { outline: none; }
.botao--escuro { width: 100%; }

/* ---------- Dúvidas ---------- */
.duvida-zap { margin-top: var(--space-10); display: grid; gap: var(--space-4); justify-items: start; }
.duvida-zap p { margin: 0; font-weight: var(--weight-semibold); }
.duvida-zap .duvida-zap__nota { margin-top: calc(var(--space-2) * -1); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-secondary); }
.botao--claro { background: var(--action-secondary); color: var(--action-secondaryText); }
.botao--claro:hover { color: var(--action-secondaryText); text-decoration: underline; }
.link-zap { font-weight: var(--weight-semibold); color: var(--text-primary); }
details { border-bottom: var(--border-hairline) solid var(--border-strong); }
summary { cursor: pointer; padding-block: var(--space-4); min-height: var(--size-control-lg); font-weight: var(--weight-semibold); font-size: var(--text-md); }
details p { margin: 0 0 var(--space-4); color: var(--text-secondary); }

/* ---------- Rodapé ---------- */
.rodape { padding-block: var(--space-12); text-align: center; }
.rodape__aviso { margin: var(--space-6) auto 0; font-size: var(--text-sm); color: var(--text-onRaizSoft); }

/* ---------- Cartões: branco, sombra de véu, sobe de leve no hover ---------- */
.cartao {
  background: var(--surface-primary); box-shadow: var(--sombra-suave);
  transition: transform var(--motion-duration-normal) var(--motion-easing-standard),
              box-shadow var(--motion-duration-normal) var(--motion-easing-standard);
}
.cartao--destaque { padding: var(--space-10) var(--space-6); border-left: var(--border-fio) solid var(--border-dourado); }
.cartao--destaque .vp-fio { display: none; }
.leva__beneficio { margin: calc(var(--space-2) * -1) 0 var(--space-6); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.lista--check { list-style: none; padding-left: 0; gap: var(--space-4); }
.lista--check li { position: relative; padding-left: var(--space-8); }
.lista--check li::before {
  content: ""; position: absolute; left: var(--space-1); top: calc(var(--space-2) - var(--space-1) / 2);
  width: var(--space-2); height: var(--space-2); background: var(--surface-dourado);
  transform: rotate(45deg); box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--surface-dourado) 35%, transparent);
}
.secao--clara .cartao { box-shadow: var(--sombra-media); }

/* ---------- Entrada suave ao rolar (só com JS e sem pedido de menos movimento) ---------- */
.js-revelar .revelar { opacity: 0; transform: translateY(var(--motion-distance-md)); }
.js-revelar .revelar.visivel {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard),
              transform var(--motion-duration-slow) var(--motion-easing-standard);
}

/* ---------- Telas largas ---------- */
@media (min-width: 48em) {
  .vp-container { padding-inline: var(--space-8); }
  .topo__grade { grid-template-columns: 1.15fr 1fr; }
  .esferas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .dupla { grid-template-columns: 1.3fr 1fr; }
  .dupla--foto-esq { grid-template-columns: 1fr 1.4fr; }
  .dupla--simetrica { grid-template-columns: 1fr 1fr; align-items: start; }
  .botao--escuro { width: auto; justify-self: start; }
  .form.cartao { padding: var(--space-12) var(--space-10); }
  .cartao--destaque { padding: var(--space-12); }
  .selo { left: calc(var(--space-10) * -1); }
  .moldura { --desloc: var(--space-6); }
}
@media (min-width: 64em) {
  .passos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .cartao { transition: none; }
  .botao:hover { transform: none; }
  .esf, .esf-orbita, .esf-cego, .esf-cego__halo { animation: none; }
  .tpc--toca .tpc__barra, .tpc--toca .tpc__rotulo-diferenca, .tpc--toca .tpc__seta path, .tpc--toca .tpc__bloco, .tpc--toca .tpc__palpebra { animation: none; }
}

/* ---------- Revisão final (04/11): leitura e toque ---------- */
.passo__quando, .topicos__titulo { font-size: var(--text-sm); }
.passo__num { color: var(--text-muted); }
.redes .rede { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
.esferas-pausadas .esf, .esferas-pausadas .esf-orbita, .esferas-pausadas .esf-cego, .esferas-pausadas .esf-cego__halo { animation-play-state: paused; }

/* ---------- Página de obrigado (obrigado.html) ----------
 * Uma ação só, visível sem rolar. As etapas são reais; nada de contagem ou progresso inventado. */
.ob {
  padding-block: var(--space-6) var(--space-10);
  background:
    radial-gradient(60% 70% at 88% 18%, color-mix(in srgb, var(--surface-dourado) 38%, transparent), transparent 70%),
    var(--surface-page);
}
.ob__grade { display: grid; gap: var(--space-10); align-items: center; max-width: var(--size-container-md); }
.ob-etapas { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }
.ob-etapa { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-secondary); }
.ob-etapa[hidden] { display: none; }
.ob-etapa--feita { color: var(--feedback-successText); font-weight: var(--weight-semibold); }
.ob-etapa--atual { color: var(--text-primary); font-weight: var(--weight-bold); }
.ob__titulo {
  margin: 0 0 var(--space-3); font-family: var(--font-sans); font-weight: var(--weight-extrabold);
  font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl)); line-height: var(--leading-titulo); letter-spacing: var(--tracking-titulo);
}
.ob__confirma { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-snug); }
.ob__voltar { margin: 0 0 var(--space-3); font-weight: var(--weight-semibold); }
.ob__voltar a, .ob-rodape a { color: var(--text-primary); text-underline-offset: .2em; }
.ob__motivo { margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-snug); }
.ob__botao { width: 100%; min-height: calc(var(--size-control-lg) + var(--space-3)); gap: var(--space-3); text-align: center; line-height: var(--leading-snug); padding-block: var(--space-3); }
.ob__botao .vp-icon { flex: none; }
.ob__botao[aria-disabled="true"] { background: var(--action-disabledBg); color: var(--action-disabledText); cursor: not-allowed; box-shadow: none; transform: none; }
.ob__depois { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--surface-primary); border: var(--border-hairline) solid var(--border-strong); }
.ob__sem-link { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.ob__calma { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.ob__calma li[hidden] { display: none; }
.ob-qr { display: none; margin: 0; text-align: center; }
.ob-qr img { display: block; width: 100%; max-width: 14rem; margin: 0 auto var(--space-3); padding: var(--space-3); background: var(--surface-primary); }
.ob-qr figcaption { font-size: var(--text-sm); color: var(--text-secondary); }

.ob-voz { padding-block: var(--space-10); background: var(--surface-raiz); }
.ob-voz__grade { display: grid; gap: var(--space-6); max-width: var(--size-container-md); }
.ob-voz__foto img { width: 100%; max-width: 12rem; aspect-ratio: 1; object-fit: cover; object-position: center 22%; }
.ob-voz__texto { margin: 0 0 var(--space-3); font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); }
.ob-voz__assinatura { display: block; color: var(--text-onRaizSerif); text-align: left; }
.ob-rodape { padding-block: var(--space-6); font-size: var(--text-sm); text-align: center; }
.ob-rodape p { margin: 0 auto; }

@media (min-width: 48em) {
  .ob { padding-block: var(--space-12); }
  .ob__botao { width: auto; }
  .ob-voz__grade { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-10); }
}
/* O QR só faz sentido com o WhatsApp em outro aparelho */
@media (min-width: 48em) and (hover: hover) and (pointer: fine) {
  .ob__grade:has(.ob-qr:not([hidden])) { grid-template-columns: 1fr auto; }
  .ob-qr:not([hidden]) { display: block; }
}

/* ---------- Política de privacidade ---------- */
.form__privacidade { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.form__privacidade a, .politica a { color: var(--text-primary); text-underline-offset: .2em; }
.rodape .rodape__aviso a { color: inherit; text-underline-offset: .2em; }
.politica { max-width: var(--size-container-md); margin-inline: auto; padding-block: var(--space-12); }
.politica__voltar { margin: 0 0 var(--space-6); font-size: var(--text-sm); }
.politica__titulo {
  margin: 0 0 var(--space-5); font-family: var(--font-sans); font-weight: var(--weight-extrabold);
  font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl)); line-height: var(--leading-titulo);
}
.politica h2 { margin: var(--space-8) 0 var(--space-2); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.politica p, .politica ul { margin: 0 0 var(--space-3); }