/* ===========================================================================
   ORÁCULO VERTICAL · CAMADA PREMIUM
   Movimento dirigido pelo scroll, arte viva e tipografia trabalhada.

   🔴 ESTA FOLHA É UMA CAMADA POR CIMA. `estilo.css` continua sendo o desenho,
   e nada aqui reescreve o que já foi aprovado: acrescenta acabamento.
   Apagar a linha <link> de premium.css no index.html devolve a página anterior.

   🔴 A REGRA QUE GOVERNA TUDO AQUI: o conteúdo nasce LEGÍVEL.
   Nenhum estado inicial escondido existe fora de `html.com-movimento`, que só
   é posto quando (a) há JS, (b) o aparelho aguenta e (c) a pessoa não pediu
   menos movimento. Sem JS, com `prefers-reduced-motion` ou com o interruptor
   desligado, a página é a de sempre, inteira, sem buraco.
   =========================================================================== */

/* ── Fonte variável, arquivo local ─────────────────────────────────────────
   Newsreader Variable, eixo de PESO 200..800. ⚠️ Newsreader ⛔ NÃO tem eixo de
   largura (wdth); a impressão de largura vem do peso somado ao espaçamento
   entre letras, que é o que a entrada anima. Isto está dito no relatório para
   ninguém achar que existe um eixo que não existe. */
@font-face{
  font-family:'Newsreader Var';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fontes/newsreader-variavel-wght.woff2') format('woff2-variations');
  /* ⚠️ Esta é a faixa que o ARQUIVO realmente contém (o recorte "latin" do
     Fontsource). Declarar latin-ext aqui seria mentira: o navegador tentaria
     desenhar com esta fonte um caractere que ela não tem, e sairia quadradinho.
     O português cabe inteiro em U+0000-00FF. */
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --grao:.038;             /* textura: forte o bastante para tirar o plástico, fraca para não sujar */
  --premium-suave:cubic-bezier(.22,.61,.36,1);
}

/* Os títulos passam a usar a variável. O fallback é a Newsreader estática que
   já estava na página, então uma falha de download ⛔ não muda o desenho. */
h1,h2,.hero-assinatura,.faixa-frase p,.investimento .v,.cartoes .v,.campo > label,.campo > .rot,.faq summary{
  font-family:'Newsreader Var','Newsreader',Georgia,'Times New Roman',serif;
}
h1,h2{font-variation-settings:'wght' 420;}
h1{letter-spacing:-.022em;}

/* ── Grão ──────────────────────────────────────────────────────────────────
   Uma textura fixa por cima de tudo. É uma imagem SVG gerada uma vez pelo
   navegador. ⛔ Não recebe clique.

   🔴 ⛔ NADA DE `mix-blend-mode` AQUI. Medido em 16/09: com `overlay` numa
   camada fixa do tamanho da tela, o compositor refaz a TELA INTEIRA a cada
   quadro, e a cena pinada caía para 23 fps com a CPU 4x mais lenta. Só com
   opacidade, o grão vira uma camada que o compositor desenha uma vez e
   reaproveita enquanto a página rola. */
body::after{
  content:'';position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:var(--grao);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media print{body::after{display:none;}}

/* ── Filetes de cobre ──────────────────────────────────────────────────────
   O fio que costura as seções. Ele cresce com o scroll (ver motion.js), e sem
   movimento nasce inteiro. */
.secao + .secao::before{
  content:'';position:absolute;left:50%;top:0;width:1px;height:clamp(34px,5vw,74px);
  transform:translateX(-50%);transform-origin:top;
  background:linear-gradient(180deg,var(--cobre-fraco),transparent);
  pointer-events:none;
}
html.com-movimento .secao + .secao::before{transform:translateX(-50%) scaleY(var(--filete,0));}

/* A imagem que faz paralaxe é maior que o buraco onde ela mora, e o buraco
   recorta. Sem isto ela empurraria o layout e apareceria borda vazia. */
html.com-movimento .recorta-paralaxe{overflow:clip;}

/* ── Índice das seções ─────────────────────────────────────────────────────
   O "contador" da transição entre seções. Discreto, na borda, só onde há
   largura sobrando. ⛔ Some abaixo de 1100px para ⛔ nunca disputar espaço com
   o texto nem criar rolagem lateral no celular. */
.indice-secoes{
  position:fixed;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);
  z-index:55;display:none;flex-direction:column;gap:14px;align-items:flex-end;
  pointer-events:none;
}
@media (min-width:1100px){.indice-secoes{display:flex;}}
.indice-secoes a{
  pointer-events:auto;text-decoration:none;display:flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:15px;letter-spacing:.14em;
  color:var(--cinza-escuro);font-variant-numeric:tabular-nums;
  opacity:.5;transition:opacity .4s var(--premium-suave),color .4s var(--premium-suave);
}
.indice-secoes a::after{content:'';width:14px;height:1px;background:currentColor;transition:width .4s var(--premium-suave);}
.indice-secoes a:hover{opacity:1;}
.indice-secoes a.ativo{opacity:1;color:var(--cobre-claro);}
.indice-secoes a.ativo::after{width:30px;}
.indice-secoes .conta{
  margin-top:8px;padding-top:12px;border-top:1px solid var(--linha-escura);
  font-family:var(--sans);font-size:15px;letter-spacing:.12em;color:var(--cinza-escuro);
  font-variant-numeric:tabular-nums;
}
/* Sobre fundo claro o índice inverte, senão some dentro do marfim. */
.indice-secoes.em-claro a{color:#8a8378;}
.indice-secoes.em-claro a.ativo{color:var(--cobre);}
.indice-secoes.em-claro .conta{color:#8a8378;border-top-color:var(--linha-clara);}

/* ── Arte viva ─────────────────────────────────────────────────────────────
   O canvas mora ATRÁS do conteúdo e ⛔ nunca recebe clique. Quando não há
   WebGL, o mesmo elemento recebe o desenho estático em 2D: ⛔ não sobra buraco. */
.arte{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;opacity:0;transition:opacity 1.1s var(--premium-suave);}
.arte.acesa{opacity:1;}
.hero .arte{z-index:1;opacity:0;}
.hero .arte.acesa{opacity:.7;}           /* no hero é sussurro, ⛔ não é protagonista */
.faixa .arte{z-index:1;}
.faixa .arte.acesa{opacity:.92;}
@media (prefers-reduced-motion:reduce){.arte{transition:none;}}

/* ── A cena do caos que vira eixo ──────────────────────────────────────────
   Com movimento, a faixa fica alta e o palco gruda na tela: é o "pin". Sem
   movimento, ela volta a ser a faixa 21:9 de sempre, no lugar de sempre. */
.faixa{overflow:clip;}
.faixa-palco{position:relative;}
html.com-movimento .faixa{height:230vh;}
html.com-movimento .faixa-palco{
  position:sticky;top:0;height:100vh;display:grid;place-items:stretch;overflow:clip;
}
html.com-movimento .faixa-palco .vaga,
html.com-movimento .faixa-palco img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
html.com-movimento .faixa-frase{background:linear-gradient(0deg,rgba(10,10,12,.82),rgba(10,10,12,.30));}
/* ⛔ NADA de `will-change` permanente aqui. Ele promove o elemento a camada e a
   mantém promovida para sempre; numa faixa grudada do tamanho da tela isso
   custou quadros na medição de 16/09. O GSAP já compõe o que ele anima. */
/* No celular a cena encurta: meia altura, e o texto continua inteiro. */
@media (max-width:640px){
  /* 🔴 140svh, e ⛔ não 180vh (16/09, segunda passada). Duas coisas de uma vez:
     ·  porque a barra do navegador do celular come altura, e  mede a
       tela como se ela ⛔ não existisse;
     · 140 porque 180 eram 1,8 tela inteira de rolagem só para uma transição, e
       o Lucas reclamou justamente de a página demorar a chegar no assunto.
     ⛔ A cena ⛔ não saiu: ela ficou mais curta. */
  html.com-movimento .faixa{height:140svh;}
}

/* ── Citação em destaque ───────────────────────────────────────────────────
   As MESMAS palavras que já estavam aprovadas, com o peso que elas merecem.
   ⛔ Nenhuma frase nova foi escrita aqui. */
.citacao{
  font-family:'Newsreader Var','Newsreader',Georgia,serif;
  font-size:clamp(1.18rem,2.1vw,1.5rem)!important;
  line-height:1.42;font-variation-settings:'wght' 380;
  color:var(--marfim-tinta)!important;max-width:34ch;
  padding-left:22px;border-left:1px solid var(--cobre);
  margin-top:8px;
}
.clara .citacao{color:#2a2823!important;}

/* ── Máscara de revelação dos títulos ──────────────────────────────────────
   O SplitText cria uma linha por linha real de texto. A máscara é o pai com
   overflow escondido; a linha entra de baixo. Sem movimento, nada disto existe
   e o título é só um título. */
/* ⚠️ ⛔ NADA de padding/margin de compensação aqui. Medido em 16/09: a sobra de
   .06em fazia cada título crescer 3 px depois de fatiado, e 139 px somados
   empurravam a página inteira para baixo (CLS de 0,04). A máscara é só recorte. */
html.com-movimento .linha-mascara{overflow:hidden;display:block;}
html.com-movimento .linha-corpo{display:block;will-change:transform;}

/* Estados iniciais. ⚠️ TODOS trancados dentro de html.com-movimento, de
   propósito: é o que garante que a página sem JS nasça inteira. */
html.com-movimento .sobe .rotulo,
html.com-movimento .sobe .corpo,
html.com-movimento .sobe .lista-situacao li,
html.com-movimento .sobe .cartoes > div,
/* ⚠️ `.depos .depo` saiu em 16/09 junto com o bloco de 8 depoimentos.
   🔴 O mural que entrou no lugar ⛔ NÃO ganha estado inicial invisível aqui, de
   propósito: os cards dele nascem em blocos ao longo da rolagem horizontal, e
   qualquer regra de `opacity:0` sobre eles dependeria de um gatilho que ⛔ não
   existe para os que chegam depois. Depoimento invisível é pior que depoimento
   sem entrada. */
html.com-movimento .sobe .livros figure,
html.com-movimento .sobe .triangulo,
html.com-movimento .sobe .citacao,
html.com-movimento .sobe .miudo,
html.com-movimento .sobe .aviso-depo,
/* ⚠️ `.form-caixa` virou `.convite-caixa` em 16/09: o formulário mudou-se para o
   pop-up e o que entra em cena aqui é o convite com o botão. ⛔ Nada de dentro do
   <dialog> ganha estado inicial invisível: ele abre por clique, ⛔ não por
   rolagem, e um gatilho de scroll ⛔ nunca dispararia ali. */
html.com-movimento .sobe .convite-caixa,
html.com-movimento .sobe .convite-chamada,
html.com-movimento .hero-marca,
html.com-movimento .hero-apoio,
html.com-movimento .hero-assinatura,
html.com-movimento .hero-nota,
html.com-movimento .hero-fatos,
html.com-movimento .hero-sobretitulo,
html.com-movimento .hero .botao{opacity:0;}

/* O botão do hero ⛔ não pode ficar preso invisível se o GSAP falhar. Esta
   rede de segurança devolve tudo depois de 2,2 s, aconteça o que acontecer. */
html.com-movimento.motor-caiu .sobe *,
html.com-movimento.motor-caiu .hero *{opacity:1!important;transform:none!important;}

/* ── Interruptor "ver com movimento" ───────────────────────────────────────
   🔴 O Windows do Lucas reporta `reduce`. Sem este botão ele abriria a página
   parada e acharia que quebrou. Ele fica no rodapé, é texto, e ⛔ não cobre
   nada nem sequestra a tela. */
.botao-movimento{
  background:none;border:0;padding:0;margin-top:14px;cursor:pointer;
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--cinza-claro);
  text-decoration:underline;text-underline-offset:3px;text-align:left;
}
.botao-movimento:hover{color:var(--cobre-claro);}
.botao-movimento .estado{color:var(--cinza-escuro);}

/* ── Paralaxe ──────────────────────────────────────────────────────────────
   ⛔ Sem `will-change` permanente, pela mesma razão da faixa: camada promovida
   para sempre é custo para sempre. A classe fica como marca de quem se move. */
html.com-movimento .paralaxe{backface-visibility:hidden;}

/* ── Respeito ao sistema ───────────────────────────────────────────────────
   Se a pessoa pediu menos movimento e ⛔ NÃO ligou o interruptor, `com-movimento`
   nem chega a existir. Esta regra é o cinto extra: mesmo que algo escape, não
   há transição nenhuma. */
@media (prefers-reduced-motion:reduce){
  html:not(.movimento-por-escolha) *{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}