/* ==========================================================================
   PAGINAS — secoes especificas da Home, /metodo, /livro e /contato
   ========================================================================== */

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem); }
.hero h1 { margin-bottom: var(--e-5); }
.hero .lead { margin-bottom: var(--e-7); }
.hero .foto-blob { max-width: 480px; margin-inline: auto; }
@media (min-width: 1024px) {
  .hero .foto-blob { max-width: none; }
}

/* Overdrive 15/08/2026 — "luz que revela o objeto real": um brilho
   diagonal unico atravessa a foto do Hero ao carregar a pagina (ela
   esta acima da dobra, entao dispara sozinho, sem esperar scroll) e a
   capa do livro ao entrar na tela (reaproveita .revelar/.visivel).
   Um so momento visual, na foto real dela e no livro real — os dois
   "objetos" que a marca preza como verdadeiros, nunca genericos.
   .foto-blob e .capa-mockup-moldura ja tem overflow:hidden, entao o
   brilho fica recortado na forma de cada um (blob organico / retangulo
   do livro), nunca vaza para fora. */
.capa-mockup-moldura { position: relative; overflow: hidden; }
.hero .foto-blob::after,
.capa-mockup-moldura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  background-size: 300% 300%;
  opacity: 0;
}
.hero .foto-blob::after {
  animation: luz-revela 1.4s ease-out .5s both;
}
.livro-bloco.revelar.visivel .capa-mockup-moldura::after {
  animation: luz-revela 1.4s ease-out .15s both;
}
@keyframes luz-revela {
  0%   { background-position: -60% -60%; opacity: 0; }
  15%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { background-position: 160% 160%; opacity: 0; }
}
/* ---------- Capa que flutua (Home, bloco do Livro) ----------
   /impeccable overdrive de 15/08/2026. Movimento constante e sutil
   simulando 3D. Ver design.md SS5 — as amplitudes sao teto tecnico, nao
   gosto: o volume, a lombada e a sombra sao ASSADOS na imagem, entao
   girar em CSS poe duas perspectivas em conflito. Ate ~2deg le como
   flutuacao; acima disso a lombada denuncia o truque.

   O giro vai na MOLDURA, nao na tag de imagem: a moldura tem overflow:hidden
   para recortar o luz-revela, e um filho transformado dentro dela seria
   cortado nas quinas ao inclinar. Girando a moldura inteira, o recorte
   gira junto e nada e cortado.

   perspective() como funcao de transform, nao propriedade no ancestral:
   dispensa elemento novo e nao transforma .livro-bloco em bloco de
   contencao dos absolutos que vivem dentro dele.

   Tres ciclos de periodos nao harmonicos (17/11/9s) compostos por
   variaveis @property — custom property nao registrada nao interpola.
   O padrao combinado so se repete a cada ~28 minutos, entao o movimento
   nunca se entrega como loop. */
@property --capa-giro-y { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --capa-giro-x { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --capa-sobe   { syntax: '<length>'; inherits: false; initial-value: 0px; }

.capa-mockup-moldura {
  transform:
    perspective(1100px)
    rotateY(var(--capa-giro-y, 0deg))
    rotateX(var(--capa-giro-x, 0deg))
    translateY(var(--capa-sobe, 0px));
}

/* A flutuacao so comeca quando o bloco entra na tela, presa ao .visivel
   que o IntersectionObserver ja escreve — zero JS novo. Duas razoes:
   nao queima quadro nenhum enquanto o bloco esta longe da viewport (a
   Home e alta e este bloco fica no meio), e o movimento comeca DEPOIS
   do luz-revela em vez de junto, o que separa os dois momentos.
   Sem a animacao as tres variaveis ficam no initial-value e o transform
   vira identidade — a capa nasce parada e correta. */
.livro-bloco.visivel .capa-mockup-moldura {
  animation:
    capa-giro-y 17s ease-in-out infinite,
    capa-giro-x 11s ease-in-out infinite,
    capa-sobe    9s ease-in-out infinite;
}
@keyframes capa-giro-y {
  0%, 100% { --capa-giro-y: -1.6deg; }
  50%      { --capa-giro-y:  1.6deg; }
}
@keyframes capa-giro-x {
  0%, 100% { --capa-giro-x:  1deg; }
  50%      { --capa-giro-x: -1deg; }
}
@keyframes capa-sobe {
  0%, 100% { --capa-sobe:  7px; }
  50%      { --capa-sobe: -7px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Seletor espelha a especificidade de .livro-bloco.visivel (0,3,0):
     media query nao acrescenta peso nenhum, entao um .capa-mockup-moldura
     solto (0,1,0) perderia para a regra que liga a flutuacao. */
  .livro-bloco.visivel .capa-mockup-moldura { animation: none; transform: none; }
  .hero .foto-blob::after,
  .capa-mockup-moldura::after { animation: none !important; opacity: 0 !important; }
}

/* Hero full-bleed com overlay indigo (pagina /metodo) */
.hero-full {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 62vh, 620px);
  isolation: isolate;
  background: var(--indigo-900);
  color: var(--texto-claro);
}
.hero-full > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
.hero-full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(20, 18, 43, .94) 0%,
    rgba(20, 18, 43, .88) 42%,
    rgba(20, 18, 43, .55) 72%,
    rgba(20, 18, 43, .35) 100%);
}
.hero-full h1 { font-size: var(--t-h1-full); line-height: 1.05; letter-spacing: -.015em;
  color: var(--creme); max-width: 20ch; margin-bottom: var(--e-5); }
.hero-full .lead { max-width: 34rem; margin-bottom: var(--e-7); }
.hero-full .conteudo { padding-block: var(--e-9); max-width: 40rem; }

/* ---------- Reconhecimento ----------
   Sem override de tamanho: os paragrafos usam --t-corpo, igual ao resto
   do corpo do site. O 1.125rem antigo era 1px maior que o padrao sem
   nenhum papel tipografico proprio — so ruido na escala.

   Desde 15/08/2026 e indigo com ceu vivo e coluna centralizada, mesmo
   tratamento do Manifesto (design.md SS7).

   Larguras calculadas para as quebras que o Bruno pediu — titulo em 2
   linhas, corpo em 5 — usando a calibragem do proprio design.md
   (36rem = ~68 caracteres a 17px, logo ~8,5px por caractere):

   - h2 em 44rem: ~34 caracteres por linha em Playfair 44px, entao os 57
     caracteres do titulo quebram em 2, no ponto natural depois de
     "sozinho.". Mais largo que --medida-h2 (36rem), que daria 3 linhas.
     NAO acompanha a largura do container de proposito: a 70rem o titulo
     caberia numa linha so e perderia a quebra pedida.
   - paragrafos sem limite proprio, ocupando os 70rem do container:
     ~132 caracteres por linha, o que ainda da 2 + 2 + 1 = 5 linhas.

   Os 70rem sao quase o dobro da medida de 62-72 caracteres que a SS4
   pede. E excecao consciente e registrada (design.md SS4), pedida
   diretamente: o bloco tem 5 linhas no total, e medida larga cobra caro
   em leitura longa, nao em passagem curta. */
.reconhecimento { text-align: center; }
.reconhecimento .container {
  max-width: 70rem;
  margin-inline: auto;
}
.reconhecimento h2 { max-width: 44rem; margin-inline: auto; }
.reconhecimento p { max-width: none; margin-inline: auto; }

/* ---------- O metodo (Home) ---------- */

.metodo-orbita { display: none; }
@media (min-width: 1024px) {
  .metodo-orbita { display: grid; place-items: center; color: var(--ouro); opacity: .5; }
  .metodo-orbita svg { width: 100%; max-width: 320px; height: auto; }
}

/* ---------- Diferenciais ---------- */

/* Titulo real (nao mais eyebrow) para a secao ganhar um ponto de parada
   visual ao escanear a pagina — o texto continua o mesmo do COPY.md,
   so o tratamento tipografico mudou. */
.diferenciais h2 { margin-bottom: var(--e-6); }

/* Titulo de card, nao heading que escala com a tela: alinha com
   Tratamentos (.card-escuro h3) e com os cards do /metodo (.card h3),
   que ja usam --t-card para o mesmo papel. Sem isso, o mesmo tipo de
   conteudo — titulo de card num grid — teria dois tamanhos diferentes
   na mesma pagina. */
.diferenciais-grid h3 { font-size: var(--t-card); line-height: var(--lh-card); }

.diferenciais-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .diferenciais-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .diferenciais { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}

/* ---------- Bloco do livro ---------- */

.livro-bloco { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 768px) {
  .livro-bloco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); }
}
.livro-dados { font-size: var(--t-peq); color: var(--texto-suave); }
.escuro .livro-dados, .estrelado .livro-dados { color: rgba(239, 233, 242, .72); }

/* ---------- Tratamentos ---------- */

.tratamentos-grid { display: grid; gap: var(--gap); grid-auto-rows: 1fr; }
@media (min-width: 640px) { .tratamentos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tratamentos-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Manifesto ---------- */

.manifesto { text-align: center; position: relative; }

/* 70rem — segunda excecao registrada a medida de linha da SS4, pedida
   pelo Bruno em 15/08/2026 depois de eu apontar que a primeira (o
   Reconhecimento) estava marcada como "nao e precedente". Era 32rem, a
   coluna mais estreita do site.

   Alargar so o .conteudo nao bastaria: o base.css poe teto de 36rem em
   p e em h2, e esses tetos venceriam. Por isso os dois sao soltos aqui
   — sem isso o bloco ficaria a 70rem com o texto ainda a 36rem dentro,
   e nada mudaria na tela. */
.manifesto .conteudo { max-width: 70rem; margin-inline: auto; }
.manifesto h2 { max-width: none; }

/* Constelacao que se desenha — o momento emocional da pagina ganha o
   unico ornamento de linha do site (design.md SS3 previa "constelacoes
   ligadas por linha", nunca construido). So na margem, onde ha espaco
   de sobra ao lado da coluna central.

   O breakpoint era 1024px, calibrado para a coluna de 32rem. Com a
   coluna a 70rem a margem sumiu e o texto passava por baixo do
   ornamento: ~101px de sobreposicao a 1280 de viewport, ~28px a 1440.
   Subiu para 1500px, que e onde a margem volta a comportar os 130px do
   SVG sem encostar no texto. Abaixo disso o ornamento nao e desenhado —
   mesmo principio que ja valia no mobile. Se a coluna voltar a 32rem,
   este numero volta para 1024. */
.constelacao-manifesto {
  display: none;
  position: absolute;
  top: 8%;
  right: 4%;
  width: 130px;
  height: auto;
  color: var(--ouro-claro);
  pointer-events: none;
}
.constelacao-manifesto .ponto { fill: currentColor; opacity: .8; }
.constelacao-manifesto .traco {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .4;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
@media (min-width: 1500px) { .constelacao-manifesto { display: block; } }

/* Reforco progressivo: quem tem scroll-driven animation ve a linha se
   desenhando enquanto a secao passa pela tela. Quem nao tem (Firefox,
   navegadores mais antigos) ve a mesma constelacao ja tracada, pelo
   .revelar/IntersectionObserver que ja existe — nunca fica sem nada. */
@supports (animation-timeline: view()) {
  .constelacao-manifesto .traco {
    stroke-dashoffset: 100;
    animation: constelacao-desenhar linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 85%;
  }
}
@keyframes constelacao-desenhar { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .constelacao-manifesto .traco { animation: none !important; stroke-dashoffset: 0 !important; }
}
/* A eyebrow e flex: text-align nao centraliza item de flex, so justify-content. */
.manifesto .eyebrow { justify-content: center; }
.manifesto h2 { margin-inline: auto; margin-bottom: var(--e-6); }
.manifesto p { margin-inline: auto; max-width: none; color: var(--texto-claro); }
.manifesto p + p { margin-top: var(--e-5); }
.manifesto .btn { margin-top: var(--e-8); }

/* ---------- Sobre ---------- */

.assinatura { margin-top: var(--e-6); width: 190px; height: auto; color: var(--indigo-800); }

/* ---------- CTA final ---------- */

.cta-final { text-align: center; }
.cta-final h2 { margin-inline: auto; margin-bottom: var(--e-4); }
.cta-final p { margin-inline: auto; }
.cta-final .btn { margin-top: var(--e-7); }

/* ---------- /metodo: camadas do campo ---------- */

.camadas { display: grid; gap: 0; max-width: 46rem; margin-top: var(--e-7); }
.camada {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-5);
  border-bottom: 1px solid rgba(33, 30, 68, .12);
}
.camada:first-child { border-top: 1px solid rgba(33, 30, 68, .12); }
@media (min-width: 640px) {
  .camada { grid-template-columns: 10rem 1fr; gap: var(--e-5); align-items: baseline; }
}
.camada dt { font-family: var(--fonte-display); font-size: var(--t-card); }
.camada dd { color: var(--texto-suave); }

/* ---------- /metodo: o que nao faz ---------- */

.negativas { display: grid; gap: var(--e-5); max-width: 42rem; margin-top: var(--e-7); }
.negativas > div { padding-left: var(--e-5); border-left: 2px solid var(--coral); }
.negativas h3 { font-size: var(--t-card); margin-bottom: var(--e-2); }
.escuro .negativas > div { border-left-color: var(--ouro-claro); }

/* ---------- /livro: topicos numerados ---------- */

.topicos { display: grid; gap: var(--e-5); counter-reset: topico; max-width: 46rem; margin-top: var(--e-7); }
.topicos li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--e-4);
  align-items: baseline;
  counter-increment: topico;
}
.topicos li::before {
  content: counter(topico, decimal-leading-zero);
  font-family: var(--fonte-display);
  font-size: var(--t-numeral);
  color: var(--ouro-texto);
}
.topicos strong { font-family: var(--fonte-display); font-weight: 500; font-size: var(--t-card); display: block; margin-bottom: var(--e-1); }

/* ---------- /livro: trecho de degustacao ---------- */

.trecho {
  background: var(--creme-2);
  border-radius: var(--r-painel);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  max-width: 46rem;
  margin-inline: auto;
}
/* Corpo do trecho em Playfair: design.md §8 pede "serifada maior" para o
   trecho de degustacao — antes so a frase final (.trecho-final) tinha
   isso, o corpo inteiro do trecho renderizava em Inter, sem essa marca. */
.trecho p { font-family: var(--fonte-display); font-size: var(--t-trecho); line-height: var(--lh-trecho); max-width: 37rem; margin-inline: auto; }
.trecho p + p { margin-top: var(--e-5); }

/* Marcador de corte entre paragrafos selecionados.
   Cor em --texto-suave, nao em ouro: ouro sobre creme da 2,4:1 e o
   design.md proibe ouro em texto pequeno sobre fundo claro. */
.trecho .elipse {
  text-align: center;
  color: var(--texto-suave);
  letter-spacing: .3em;
  margin-block: var(--e-6);
}

/* A frase-ancora do capitulo fecha o trecho */
.trecho .trecho-final {
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(201, 162, 39, .4);
}

.trecho .trecho-fonte {
  margin-top: var(--e-6);
  max-width: 34rem;
  margin-inline: auto;
}
.trecho cite { font-style: italic; }

/* ---------- /livro: tabela ebook x impresso ---------- */

.comparativo { width: 100%; border-collapse: collapse; max-width: 44rem; margin-top: var(--e-7); }
.comparativo th, .comparativo td {
  padding: var(--e-4) var(--e-3);
  text-align: left;
  border-bottom: 1px solid rgba(33, 30, 68, .12);
  font-size: var(--t-corpo);
}
.comparativo thead th { font-family: var(--fonte-display); font-weight: 500; font-size: var(--t-card); }
.comparativo tbody th { font-weight: 600; color: var(--texto-suave); font-size: var(--t-peq); }

/* No mobile a tabela vira cards empilhados */
@media (max-width: 639px) {
  .comparativo, .comparativo tbody, .comparativo tr, .comparativo td, .comparativo th { display: block; }
  .comparativo thead { display: none; }
  .comparativo tr { margin-bottom: var(--e-5); padding-bottom: var(--e-4); border-bottom: 1px solid rgba(33, 30, 68, .12); }
  .comparativo tbody th { border: 0; padding-bottom: var(--e-1); }
  .comparativo td { border: 0; padding-block: var(--e-1); }
  .comparativo td::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--texto-suave); }
}

/* ---------- /contato ---------- */

.contatos { display: grid; gap: var(--gap); margin-top: var(--e-7); }
@media (min-width: 640px) { .contatos { grid-template-columns: repeat(2, 1fr); } }
.contato-item { display: grid; gap: var(--e-1); }
.contato-item dt { font-size: var(--t-peq); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-suave); }
.contato-item dd { font-family: var(--fonte-display); font-size: var(--t-h3); }
.contato-item dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
}

.passos { display: grid; gap: var(--e-6); counter-reset: passo; max-width: 42rem; margin-top: var(--e-7); }
.passos li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--e-4);
  counter-increment: passo;
}
.passos li::before {
  content: counter(passo);
  font-family: var(--fonte-display);
  font-size: var(--t-numeral);
  color: var(--ouro-texto);
}
.passos strong { display: block; margin-bottom: var(--e-1); }