/* ============================================================
   Site — Marco Goulart, CFP®
   Depende de tokens.css (gerado). Só usa tokens semânticos.

   Estrutura de superfície, deliberada:
     hero + 6 cenas + ecossistema .... navy   (o problema)
     diagnóstico em diante ........... claro  (os fatos e a proposta)
   ============================================================ */

/* ---------- Base ------------------------------------------------ */

:root {
  /* Altura do menu fixo. A copy das cenas reserva este espaço no topo:
     sem isso, o bloco de texto centralizado sobe por baixo do menu quando
     a cena tem muitas linhas — foi o que aconteceu no executivo, que tem
     sete. Não é token de marca, é medida deste layout. */
  --topo-altura: 76px;
}

html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
html.paginacao-mobile,
html.paginacao-cenas { scroll-behavior: auto; overscroll-behavior-y: none; }

/* O navegador precisa saber ANTES do primeiro touchmove que, dentro do cinema,
   o eixo vertical pertence ao controlador de cenas. Sem `touch-action`, Chrome
   e Safari podem segurar o scroll programático até o dedo sair da tela; o
   relógio continua correndo e a transição parece travar e depois disparar.
   `pan-x` preserva o menu/carrosséis horizontais e `pinch-zoom`, o zoom. */
html.paginacao-mobile .cinema,
html.paginacao-cenas .cinema { touch-action: pan-x pinch-zoom; }

body {
  overflow-x: hidden;
  background: var(--surface-inverse);
}

img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: var(--bw-2) solid var(--focus-ring);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  left: -9999px;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-base);
  color: var(--text-strong);
}
.pular:focus { left: var(--space-4); top: var(--space-4); }

.faixa {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}
.faixa--prosa { max-width: 780px; }

.overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-5);
}
.overline sup { letter-spacing: 0; }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: 56ch;
}

.nota {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-faint);
  max-width: var(--prose-max);
  margin-top: var(--space-7);
}
.nota--placeholder {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: var(--bw-2) solid var(--accent-soft);
}
.nota code { font-size: 0.95em; }

/* ---------- Botões ---------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                       /* alvo de toque */
  padding: var(--space-3) var(--space-6);
  border: var(--bw-1) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.botao:hover { text-decoration: none; }
.botao--grande { min-height: 56px; padding-inline: var(--space-8); font-size: var(--fs-body); }

.botao--acento {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--mgf-navy-900);
  box-shadow: var(--glow-gold);
}
.botao--acento:hover { background: var(--mgf-gold-light); border-color: var(--mgf-gold-light); }

.botao--contorno {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.botao--contorno:hover { background: var(--accent); color: var(--mgf-navy-900); }

.botao--escuro {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}
.botao--escuro:hover { background: var(--mgf-navy-700); border-color: var(--mgf-navy-700); }

/* ---------- Topo ------------------------------------------------ */

.topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  padding-block: var(--space-5);
  transition: background var(--dur-slow) var(--ease-standard);
}
html.js .topo { position: fixed; }

.topo--fixo {
  background: rgba(11, 19, 32, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--bw-hair) solid var(--border-on-inverse);
  padding-block: var(--space-3);
}

.topo__interno {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.topo__marca {
  display: flex;
  align-items: center;
  min-height: 44px;              /* alvo de toque, mesmo com o logo menor */
}
.topo__marca img { height: 40px; width: auto; }

.atalho {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.atalho__rotulo {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-on-inverse-faint);
}
.atalho__lista { display: flex; gap: var(--space-2); }
.atalho__lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-on-inverse-muted);
  border-bottom: var(--bw-1) solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.atalho__lista a:hover,
.atalho__lista a:focus-visible {
  color: var(--text-on-inverse);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ---------- Cenas ----------------------------------------------- */

/* As cenas são transparentes: o que se vê atrás delas é o canvas do cinema. */
.cena {
  position: relative;
  z-index: var(--z-raised);
  color: var(--text-on-inverse);
}
/* Cenas mais longas do que a tela: é a rolagem que vira o tempo do clipe.
   Metade de cada clipe é transição (o mergulho no quadrante), então a cena
   precisa de curso suficiente para a copy ainda ter espaço depois que a
   cena de fato chega. */
html.js .cena { height: 380vh; }
html.js .cena--hero { height: 260vh; }

/* O cinema: um canvas só, fixado, para as seis cenas.

   `margin-bottom: -100vh` tira o palco do fluxo, então as seções de cena
   começam no topo do container e rolam POR CIMA do canvas. O canvas nunca
   entra nem sai da tela — só o quadro desenhado nele muda. É isso que faz a
   passagem de uma cena para a outra ser contínua: como os clipes são
   encadeados (o último quadro de um é o primeiro do seguinte), a troca de
   cena não tem costura visível. */
.cinema { position: relative; }

.cinema__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  background: var(--vignette-navy);
  z-index: var(--z-base);
}
html:not(.js) .cinema__palco { display: none; }

.cinema__canvas { width: 100%; height: 100%; }

/* O poster é a versão de quem não tem canvas: sem JS ele é a cena. */
html.js .cena__poster { display: none; }
html:not(.js) .cena__poster { width: 100%; height: auto; }

/* Vinheta por cima do canvas: aprofunda as bordas e garante que o texto
   sobreposto tenha contraste sem depender do que o vídeo entregou. */
.cena__vinheta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 19, 32, 0.88) 0%, rgba(11, 19, 32, 0.55) 42%, transparent 78%),
    radial-gradient(120% 90% at 50% 40%, transparent 0%, rgba(11, 19, 32, 0.3) 62%, rgba(11, 19, 32, 0.8) 100%),
    linear-gradient(180deg, rgba(11, 19, 32, 0.55) 0%, transparent 28%, transparent 62%, rgba(11, 19, 32, 0.9) 100%);
}

.cena__texto {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-9);
}

/* A copy fica fixada junto com o canvas e ocupa a mesma tela.

   As medidas abaixo são presas à ALTURA da janela, não à largura. O motivo:
   a copy das cenas é intocável, e a cena do executivo tem sete linhas —
   num laptop de 768 px de altura o bloco estourava a tela e a composição
   quebrava. Os extremos do clamp continuam sendo os tokens do sistema:
   numa tela alta a cena aparece em --fs-h1 e --fs-lead, como projetado;
   numa baixa ela encolhe até --fs-h2 e --fs-body em vez de vazar. */
html.js .cena__texto {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Alinhado pelo TOPO, não centralizado.

     Centralizar parece mais elegante e não é: como as cenas têm seis ou
     sete linhas, cada bloco tem uma altura diferente, e o título de cada
     cena aparecia numa altura diferente da anterior. Rolando de uma para
     a outra, o olho perdia a referência a cada troca.

     Preso ao topo numa medida fixa, o sobretítulo e o título de TODAS as
     cenas nascem exatamente no mesmo lugar. A lista é que cresce para
     baixo, e é para lá que o olho já está indo. */
  justify-content: flex-start;
  /* O texto começa no terço superior da tela. Há espaço suficiente no
     desktop e esta posição mantém a cena visível sem empurrar a lista para
     a borda inferior. */
  padding-top: clamp(
    calc(var(--topo-altura) + var(--space-5)),
    15vh,
    180px);
  padding-bottom: clamp(var(--space-5), 5vh, var(--space-8));
  pointer-events: none;
}

/* Evita a primeira pintura do texto antes de o manifest e os gatilhos
   assumirem o estado correto. Assim que o cinema está montado, o JS inclui
   .cinema-pronto e a copy reaparece já na cena certa. */
html.js:not(.cinema-pronto) .cena__texto { visibility: hidden; }
html.js .cena__titulo { font-size: clamp(var(--fs-h3), 4.4vh, var(--fs-h1)); }
html.js .cena--hero .cena__titulo { font-size: clamp(var(--fs-h2), 5.6vh, var(--fs-display-2)); }
html.js .cena__lead,
html.js .dores li,
html.js .cena__coro { font-size: clamp(var(--fs-body-sm), 2.1vh, var(--fs-lead)); }
html.js .dores { gap: clamp(var(--space-2), 1.3vh, var(--space-4)); }
html.js .cena__titulo { margin-bottom: clamp(var(--space-3), 2.4vh, var(--space-6)); }
html.js .cena__acoes { margin-top: clamp(var(--space-4), 3vh, var(--space-7)); }
html.js .cena__texto a,
html.js .cena__texto .botao { pointer-events: auto; }

.cena__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-display-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-on-inverse);
  margin: 0 0 var(--space-6);
  max-width: 20ch;
}
.cena__titulo span { display: block; }
.cena__titulo span + span { color: var(--text-on-inverse-muted); }

.cena--hero .cena__titulo { font-size: var(--fs-display-2); max-width: 18ch; }

.cena__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-on-inverse-muted);
  max-width: 46ch;
  margin: 0 0 var(--space-7);
}

/* As seis (ou sete) linhas de dor. Corpo, nunca serifa: em Playfair o
   bloco fica pesado e ninguém lê até o fim. */
.dores {
  display: grid;
  gap: var(--space-4);
  max-width: 52ch;
}
.dores li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  /* Entrelinha aberta: cada item é uma frase inteira, muitos com duas
     linhas. Em 1,25 as duas linhas de um item colavam nas do item
     seguinte e a lista virava um bloco cinza. */
  line-height: 1.45;
  color: var(--text-on-inverse-muted);
  max-width: 46ch;
}
.dores li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;              /* alinhado à primeira linha, não ao meio do item */
  width: 14px;
  height: var(--bw-hair);
  background: var(--accent);
  opacity: 0.7;
}

.cena__coro {
  max-width: 54ch;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-on-inverse-muted);
}
.cena__coro p { margin: 0 0 var(--space-4); max-width: none; }
.cena__coro strong { color: var(--text-on-inverse); font-weight: var(--fw-medium); }

.cena__assinatura {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--accent);
  margin-top: var(--space-6) !important;
}

.cena__acoes { margin: var(--space-7) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }

.rolar {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-on-inverse-faint);
}
.rolar span { display: block; padding-bottom: var(--space-4); }
.rolar::after {
  content: "";
  display: block;
  width: var(--bw-hair);
  height: 36px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--accent), transparent);
}

/* A cena da virada clareia até o amanhecer — a copy branca sobreposta
   perderia contraste sobre a janela iluminada à direita. O véu à esquerda
   fica mais denso só aqui, onde o texto mora. */
.cinema__palco--claro .cena__vinheta {
  background:
    linear-gradient(90deg, rgba(11, 19, 32, 0.94) 0%, rgba(11, 19, 32, 0.72) 38%, rgba(11, 19, 32, 0.18) 72%, transparent 100%),
    linear-gradient(180deg, rgba(11, 19, 32, 0.5) 0%, transparent 30%, transparent 60%, rgba(11, 19, 32, 0.85) 100%);
}

/* A linha de transição entre cenas — SVG/CSS, nunca vídeo. */
.cena + .cena::before,
.cena + .ecossistema::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 70%);
  height: var(--bw-hair);
  background: var(--mgf-gold-leaf-h);
  opacity: 0.45;
  z-index: var(--z-raised);
}

/* ---------- Ecossistema ----------------------------------------- */

.ecossistema {
  position: relative;
  background: var(--surface-inverse-well);
  color: var(--text-on-inverse);
  padding-block: var(--space-10);
}
.ecossistema h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  color: var(--text-on-inverse);
  margin-bottom: var(--space-9);
  max-width: 16ch;
}

.ecossistema__diagrama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
}

.orbita { width: 100%; height: auto; }
.orbita__aneis circle {
  fill: none;
  stroke: var(--border-on-inverse);
  stroke-width: 1;
}
.orbita__raios line { stroke: var(--border-on-inverse); stroke-width: 1; }
.orbita__satelites circle { fill: var(--accent); }
.orbita__satelites text {
  fill: var(--text-on-inverse-muted);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--fw-medium);
  text-anchor: middle;
}
.orbita__centro circle {
  fill: var(--mgf-navy-700);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.orbita__centro text {
  fill: var(--text-on-inverse);
  font-family: var(--font-display);
  font-size: 22px;
  text-anchor: middle;
}
.orbita__centro .orbita__cfp {
  fill: var(--accent);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
}

.ecossistema__lista { display: grid; gap: var(--space-6); }
.ecossistema__lista li {
  padding-top: var(--space-5);
  border-top: var(--bw-hair) solid var(--border-on-inverse);
}
.ecossistema__lista h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.ecossistema__lista p {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-on-inverse-muted);
}

.ecossistema__fecho {
  margin: var(--space-10) 0 0;
  max-width: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--text-on-inverse-muted);
}
.ecossistema__fecho strong {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: var(--fw-display-semibold);
  color: var(--text-on-inverse);
}

/* ══════════════════════════════════════════════════════════════
   A página abre para a luz
   ══════════════════════════════════════════════════════════════ */

.secao {
  position: relative;
  padding-block: var(--space-10);
  background: var(--surface-base);
  color: var(--text-body);
}
.secao--creme { background: var(--wash-cream); }
.secao--fecho { background: var(--surface-cream); text-align: center; }
.secao--fecho .lead, .secao--fecho .nota { margin-inline: auto; }
.secao--fecho .cena__acoes { justify-content: center; }

.secao .overline { color: var(--accent-deep); }
.secao h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--text-strong);
  max-width: 22ch;
  margin-bottom: var(--space-6);
}
.secao--fecho h2 { margin-inline: auto; }
.secao .lead { margin-bottom: var(--space-9); }

/* Etapas do diagnóstico */
.etapas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-7);
  counter-reset: etapa;
}
.etapas li { padding-top: var(--space-5); border-top: var(--bw-2) solid var(--border-on-light); }
.etapas__numero {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--accent-deep);
  margin-bottom: var(--space-3);
}
.etapas h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.etapas p { margin: 0; font-size: var(--fs-body); color: var(--text-muted); }

.destaque {
  margin-top: var(--space-9);
  padding: var(--space-7);
  background: var(--surface-cream);
  border-left: var(--bw-2) solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.destaque__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.destaque p:last-child { margin: 0; color: var(--text-muted); }

/* Quem sou eu */
.faixa--duas {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}
.retrato { margin: 0; }
.retrato img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.faixa--duas p { color: var(--text-body); }
.credenciais {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-6);
  padding: var(--space-5) 0;
  border-top: var(--bw-hair) solid var(--border-on-light);
  border-bottom: var(--bw-hair) solid var(--border-on-light);
}
.credenciais li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.credenciais li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: var(--bw-hair);
  background: var(--accent-deep);
}

.assinatura {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-muted);
  border-top: var(--bw-hair) solid var(--border-on-light);
  padding-top: var(--space-5);
}

/* Casos */
.casos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}
.caso {
  padding: var(--space-7);
  background: var(--surface-card);
  border: var(--bw-hair) solid var(--border-on-light);
  border-top: var(--bw-2) solid var(--mgf-whisky-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.caso h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.caso p { margin: 0; font-size: var(--fs-body); color: var(--text-muted); max-width: none; }

/* FAQ */
.faq { border-top: var(--bw-hair) solid var(--border-on-light); }
.faq details { border-bottom: var(--bw-hair) solid var(--border-on-light); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* O título vive dentro de um <span> por um motivo: num contêiner flex, cada
   trecho de texto e cada elemento inline vira um item independente — e o
   `space-between` jogava o ® de "CFP®" para o meio da linha. Com o span, o
   título inteiro é um item só. */
.faq summary > span { flex: 1 1 auto; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--accent-deep);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0;
  padding-bottom: var(--space-6);
  color: var(--text-muted);
}

/* ---------- Páginas de perfil (as satélites) --------------------- */

/* Nelas o menu não tem estado: já entra compacto e opaco, porque não há
   hero escura por baixo para ele flutuar. */
.topo--interno { position: sticky; }
.pagina-perfil { background: var(--surface-base); }

.perfil-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
.perfil-hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfil-hero__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 19, 32, 0.92) 0%, rgba(11, 19, 32, 0.6) 46%, rgba(11, 19, 32, 0.15) 100%),
    linear-gradient(180deg, rgba(11, 19, 32, 0.85) 0%, transparent 34%, rgba(11, 19, 32, 0.75) 100%);
}
.perfil-hero__texto {
  position: relative;
  z-index: var(--z-raised);
  padding-block: var(--space-9) var(--space-8);
}
.perfil-hero .cena__titulo { font-size: var(--fs-h1); max-width: 18ch; }
.perfil-hero .cena__lead { color: var(--text-on-inverse-muted); max-width: 54ch; }

.migalha {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-on-inverse-faint);
  margin-bottom: var(--space-5);
}
.migalha { display: flex; align-items: center; }
.migalha a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* alvo de toque: é navegação, não link de texto */
  color: var(--text-on-inverse-muted);
}
.migalha span[aria-hidden] { padding-inline: var(--space-2); }

/* As linhas de dor sobre fundo claro, nas satélites. */
.dores--claro li { color: var(--text-body); font-size: var(--fs-lead); font-weight: var(--fw-light); }
.dores--claro li::before { background: var(--accent-deep); opacity: 1; }

.frentes { display: grid; gap: var(--space-7); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frente { padding-top: var(--space-5); border-top: var(--bw-2) solid var(--border-on-light); }
.frente h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.frente p { margin: 0; color: var(--text-muted); }

.irmas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.irmas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border: var(--bw-hair) solid var(--border-on-light);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.irmas a:hover { border-color: var(--accent); text-decoration: none; }


/* A distinção entre assessor, consultor e gestor — dentro do FAQ. */
.distincao {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  padding-left: var(--space-5);
  border-left: var(--bw-2) solid var(--border-on-light);
}
.distincao li {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.distincao strong { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* Newsletter — o formulário vem do provedor; aqui só o espaço e o limite
   de largura, para o embed não esticar até a borda da seção. */
.assinar { margin-top: var(--space-6); max-width: 520px; }
.assinar iframe { max-width: 100%; }

/* Rodapé */
.rodape {
  background: var(--surface-inverse-well);
  color: var(--text-on-inverse-muted);
  padding-block: var(--space-9);
  text-align: center;
}
.rodape__marca { height: 34px; width: auto; margin: 0 auto var(--space-5); opacity: 0.9; }
.rodape__frase {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-on-inverse);
  margin: 0 auto var(--space-7);
  max-width: none;
}
.rodape__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-7);
  border-bottom: var(--bw-hair) solid var(--border-on-inverse);
  margin-bottom: var(--space-7);
}
.rodape__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body-sm);
  color: var(--text-on-inverse-muted);
}
.rodape__nav a:hover { color: var(--accent); text-decoration: none; }
.rodape__nota {
  margin: 0 auto var(--space-3);
  max-width: 68ch;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-on-inverse-faint);
}
.rodape__nota--fim { margin-top: var(--space-6); margin-bottom: 0; }

/* Laptop de tela baixa — 800px de altura e menos, que é a maioria.
   O bloco começa mais alto e as linhas se aproximam um pouco: a cena do
   executivo tem sete itens e, com a entrelinha aberta, não cabia. */
@media (min-width: 768px) and (max-height: 800px) {
  html.js .cena__texto {
    padding-top: clamp(calc(var(--topo-altura) + var(--space-4)), 14vh, 150px);
  }
  html.js .dores li { line-height: 1.32; }
  html.js .dores { gap: clamp(var(--space-2), 1.1vh, var(--space-3)); }
}

/* ---------- Tablet ---------------------------------------------- */

@media (max-width: 1279px) {
  .cena__titulo { font-size: var(--fs-h2); }
  .cena--hero .cena__titulo { font-size: var(--fs-h1); }
  .ecossistema h2, .secao h2 { font-size: var(--fs-h2); }
  .ecossistema__fecho { font-size: var(--fs-h2); }
  .ecossistema__diagrama { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .faixa--duas { grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-7); }
}

/* Altura estável também em tablets e outros dispositivos de toque. As
   medidas específicas do smartphone, logo abaixo, continuam prevalecendo. */
@media (hover: none) and (pointer: coarse) {
  @supports (height: 100svh) {
    html.js .cena { height: 380svh; }
    html.js .cena--hero { height: 260svh; }
    html.js .cinema__palco { height: 100svh; }
    html.js .cena__texto { min-height: 100svh; }
  }
}

/* ---------- Smartphone ------------------------------------------ */

@media (max-width: 767px) {
  /* No celular o menu quebra em duas linhas — marca em cima, atalho embaixo —
     e fica bem mais alto que no desktop. A copy precisa reservar essa altura,
     senão sobe por baixo dele. */
  :root { --topo-altura: 148px; }

  /* Depois que sai da hero, o menu compacta para só a marca. Duas linhas
     fixas comem 148px de uma tela de 640, e o atalho "Sou" serve mesmo é
     no começo da página — de dentro de uma cena, a pessoa já chegou. */
  .topo--fixo .atalho { display: none; }
  html.js .cena:not(.cena--hero) .cena__texto { --topo-altura: 68px; }

  .topo__interno { flex-wrap: wrap; gap: var(--space-3); }
  .topo__marca img { height: 32px; }
  .topo__cta { display: none; }
  .atalho { margin-left: auto; width: 100%; order: 3; overflow-x: auto; }
  .atalho__rotulo { display: none; }
  .atalho__lista { gap: 0; }
  .atalho__lista a { padding-inline: var(--space-2); font-size: var(--fs-body-sm); white-space: nowrap; }

  /* Cenas bem mais curtas no celular. Rolar com o dedo é impreciso e cansa:
     quatro telas de curso por cena viravam trabalho. Aqui um ou dois gestos
     atravessam a cena, e a ancoragem faz o resto. */
  html.js .cena { height: 210vh; }
  html.js .cena--hero { height: 165vh; }

  /* `vh` muda quando a barra de endereço do navegador abre e fecha. Isso
     altera a geometria no meio do gesto e desloca os pontos de leitura.
     `svh` usa uma altura estável durante toda a navegação. */
  @supports (height: 100svh) {
    html.js .cena { height: 210svh; }
    html.js .cena--hero { height: 165svh; }
    html.js .cinema__palco { height: 100svh; }
    html.js .cena__texto { min-height: 100svh; }
  }

  /* No celular a copy não fica sobreposta ao quadro inteiro: o canvas ocupa
     a parte de cima da tela e o texto vive na faixa de baixo, sobre um véu
     mais denso. Continua fixado junto com a cena, então o texto só passa
     quando a cena passa — era isso que estava fora de sincronia. */
  html.js .cena__texto {
    justify-content: flex-end;
    justify-content: safe flex-end;
    padding-top: calc(var(--topo-altura) + var(--space-3));
    padding-bottom: clamp(12px, 2svh, 20px);
    /* Painel de leitura.

       No celular a copy fica sobre o vídeo, e o vídeo muda: um quadro
       claro atrás de texto branco torna a leitura impossível. Este
       degradê é opaco onde o texto vive e transparente onde a cena
       precisa aparecer — o contraste deixa de depender do frame. */
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(11, 19, 32, 0.35) 18%,
      rgba(11, 19, 32, 0.82) 42%,
      rgba(11, 19, 32, 0.95) 62%,
      #0B1320 100%);
  }
  /* A largura útil ganha alguns pixels no celular. Isso evita que frases
     longas quebrem em uma linha adicional e ajuda o bloco inteiro a caber
     sem criar rolagem interna. */
  .cena__texto { padding-inline: var(--space-4); }
  /* Sem o degradê lateral: no celular o texto está embaixo, não à esquerda. */
  .cena__vinheta { background:
    linear-gradient(180deg, rgba(11, 19, 32, 0.55) 0%, transparent 24%, rgba(11, 19, 32, 0.72) 52%, rgba(11, 19, 32, 0.94) 100%);
  }
  .cinema__palco--claro .cena__vinheta { background:
    linear-gradient(180deg, rgba(11, 19, 32, 0.5) 0%, transparent 22%, rgba(11, 19, 32, 0.8) 50%, rgba(11, 19, 32, 0.96) 100%);
  }
  .rolar { display: none; }

  /* No celular o limite real é a ALTURA disponível, sobretudo nas cenas
     com sete frases. A escala abaixo continua confortável, mas reduz quebras
     de linha, margens e entrelinha para que todo o conteúdo fique visível de
     uma vez — sem rolagem dentro da cena e sem alterar a copy. */
  .cena--hero .cena__titulo,
  html.js .cena--hero .cena__titulo {
    font-size: var(--fs-h2);
    max-width: none;
    margin-bottom: var(--space-5);
  }
  .cena:not(.cena--hero) .overline { margin-bottom: clamp(8px, 1.25svh, 12px); }
  .cena:not(.cena--hero) .cena__titulo,
  html.js .cena:not(.cena--hero) .cena__titulo {
    font-size: clamp(1.5rem, 3.35svh, 1.8rem);
    line-height: 1.08;
    max-width: none;
    margin-bottom: clamp(10px, 1.7svh, 16px);
  }
  .cena__lead,
  html.js .cena__lead { font-size: var(--fs-body); }
  .cena:not(.cena--hero) .cena__coro,
  html.js .cena:not(.cena--hero) .cena__coro {
    font-size: clamp(0.875rem, 1.9svh, 0.96875rem);
    line-height: 1.3;
  }
  .cena:not(.cena--hero) .dores li,
  html.js .cena:not(.cena--hero) .dores li {
    padding-left: 20px;
    font-size: clamp(0.875rem, 1.9svh, 0.96875rem);
    line-height: 1.3;
    max-width: none;
  }
  .cena:not(.cena--hero) .dores li::before {
    width: 10px;
    top: 0.64em;
  }
  .cena:not(.cena--hero) .dores,
  html.js .cena:not(.cena--hero) .dores {
    gap: clamp(3px, 0.7svh, 6px);
  }
  .cena:not(.cena--hero) .cena__coro p { margin-bottom: clamp(6px, 1svh, 10px); }
  .cena:not(.cena--hero) .cena__assinatura { margin-top: var(--space-3) !important; }
  .cena:not(.cena--hero) .cena__acoes { margin-top: var(--space-4); }

  .faixa { padding-inline: var(--space-5); }
  .secao, .ecossistema { padding-block: var(--space-8); }
  .secao h2, .ecossistema h2 { font-size: var(--fs-h2); max-width: none; }
  .ecossistema__fecho { font-size: var(--fs-h3); margin-top: var(--space-8); }

  /* O diagrama em SVG não é legível em 375 px — a lista é a versão dele. */
  .orbita { display: none; }

  .etapas, .casos, .frentes { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }

  /* Nas satélites a copy não disputa espaço com vídeo nenhum: as linhas
     voltam ao corpo normal em vez do corpo pequeno das cenas. */
  .perfil-hero .cena__titulo { font-size: var(--fs-h2); }
  .dores--claro li { font-size: var(--fs-body); }
  .perfil-hero__texto { padding-block: var(--space-8) var(--space-7); }
  .faixa--duas { grid-template-columns: minmax(0, 1fr); }
  .retrato { max-width: 320px; }
  .caso, .destaque { padding: var(--space-5); }
  .faq summary { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); }
}

/* Celular baixo — 640px e menos, que ainda é comum em Android de entrada.
   A copy é intocável, então quem cede é a escala. */
@media (max-width: 767px) and (max-height: 700px) {
  html.js .cena__titulo, html.js .cena--hero .cena__titulo {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-3);
  }
  .cena:not(.cena--hero) .dores li,
  html.js .cena:not(.cena--hero) .dores li {
    font-size: 0.875rem;
    line-height: 1.22;
  }
  html.js .dores { gap: 3px; }
  html.js .cena__texto { padding-inline: 14px; padding-bottom: 10px; }
  html.js .cena__lead { margin-bottom: var(--space-4); }
}

/* Celulares estreitos ganham mais dois pequenos ajustes de composição. O
   texto continua no mesmo ponto narrativo; apenas usa melhor a largura. */
@media (max-width: 380px) {
  html.js .cena:not(.cena--hero) .cena__titulo { font-size: 1.5rem; }
  html.js .cena:not(.cena--hero) .dores li,
  html.js .cena:not(.cena--hero) .cena__coro { font-size: 0.875rem; }
  html.js .cena__texto { padding-inline: 14px; }
}

/* ---------- Sem JavaScript, movimento reduzido, conexão lenta ----
   A página tem que fazer sentido inteira. Sem JS não existe canvas
   pintado, então o palco vira um bloco de atmosfera e o texto,
   que sempre foi HTML real, continua lá.                            */

/* Sem JS não há canvas: cada cena vira o seu frame de abertura seguido da
   copy. A página continua a mesma narrativa, só parada. */
html:not(.js) .cena { background: var(--surface-inverse); }
html:not(.js) .rolar { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .cena, html.js .cena--hero { height: auto; }
  html.js .cinema__palco { position: static; height: 60vh; margin-bottom: 0; }
  html.js .cena__texto {
    position: relative;
    min-height: 0;
    display: block;
    pointer-events: auto;
  }
  .rolar { display: none; }
}