/* Hero em 3D: palco do canvas.
   Só é baixado em tela grande com cursor (media no <link>), e só some com a
   foto quando o JS confirma que a cena montou (.tem-3d na raiz). Se o
   three.js falhar, a foto continua lá e ninguém vê buraco. */

.hero3d{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.hero3d--vivo{opacity:1}
.hero3d canvas{display:block;width:100%;height:100%}

/* Com a cena viva, a foto sai e o véu fica mais leve: a cena já tem a
   própria gradação, não precisa da lavagem que a fotografia pedia. */
.tem-3d .hero__foto{opacity:0;transition:opacity .5s ease}

/* a marcação de pista do motion-hero (2px de traços no pé do hero) era
   pra separar o hero da faixa de credencial na versão com foto. Sobre a
   cena 3D ela lê como fresta quebrada no fim da tela. Sai. */
.tem-3d .hero__faixa{display:none}

/* espelhado em 2026-08-15 junto com a cena: o véu escurece o lado onde o
   texto mora, e o texto passou para a coluna da DIREITA.

   ⚠️ APROFUNDADO EM 2026-08-21, A PEDIDO DO ALÊ: "escurecer a lateral
   direita pra aumentar contraste e leitura". É a opção (a) das três que
   ficaram em aberto na rodada da faixa central, e ele escolheu esta.

   O QUE MUDOU, E POR QUE NESTE FORMATO. O véu antigo já estava fundo na
   borda (.72) e morria cedo: aos 32% da largura ele valia .22 e aos 44%
   valia .04. Só que a coluna de texto começa a 49% da direita (a `.etapa`
   é `right:7vw` com `max-width:42vw`), então a METADE ESQUERDA do
   parágrafo caía em véu quase zero. E é exatamente ali que fica o ponto
   de fuga: as três marcações e o céu de fim de tarde convergem atrás do
   texto. Medido no pixel composto, antes: 66 a 77% do fundo do rótulo
   dourado abaixo de 4,5:1.

   Agora o véu é PLATÔ + RAMPA, e as duas metades têm motivo:
   · platô de .86 do 0% aos 40% da direita: é onde mora o corpo do texto,
     e é o que faz o contraste subir de verdade;
   · rampa de 40% a 53% em curva SUAVE nas duas pontas (smoothstep, não
     reta). A curva não é preciosismo: com rampa reta o canto onde o alpha
     zera vira BORDA VERTICAL no céu, e borda vertical é bloqueador do
     CONTRAIA. Testado com rampa de 7,5% e de 9%: as duas leem como painel
     escuro colado. Com 13% e as pontas suaves, lê como o fim de tarde
     caindo, que é o que a cena já conta.

   ⚠️ O 53% NÃO É ARREDONDAMENTO, É A TRAVA DO CAMINHÃO. Ele é o único
   número aqui que não pode andar para a esquerda. No INÍCIO da viagem o
   caminhão está longe, quase no ponto de fuga, e a borda direita da
   silhueta dele bate em 49% da direita, nas cinco larguras (medido: 462px
   a 901, 650 a 1280, 731 a 1440, 973 a 1920). Puxar a rampa para além de
   53% joga véu em cima dele. Como está, ele leva no máximo 0,17 a 0,22 de
   alpha na coluna mais à direita da silhueta e 0,04 a 0,05 na média, no
   início; no meio e no fim da viagem ele já andou para a esquerda e leva
   0,00 a 0,03. Conferido no pixel, com zoom: cabine, motorista, faróis e
   os dois retrovisores intactos.

   O preço, dito por inteiro: a 1440 e 1920 o texto inteiro passa de
   4,5:1. A 901 e 1280 sobra de 1 a 8% da caixa abaixo do piso, na tira de
   uns 30px colada na borda ESQUERDA da coluna, que é onde o ponto de fuga
   encosta. Fechar essa tira exigiria rampa curta (borda vertical) ou véu
   em cima do caminhão. As duas são pioras, então ficam de fora.

   ⚠️ ESTA REGRA VIROU RESERVA EM 2026-08-21. Ela continua aqui, e continua
   correta, para o navegador que não tem `mix-blend-mode`. Quem manda hoje
   é o bloco `@supports` logo abaixo. */
.tem-3d .hero__veu{
  background:linear-gradient(to left,
    rgba(8,15,12,.86) 0%,
    rgba(8,15,12,.86) 40%,
    rgba(8,15,12,.80) 42%,
    rgba(8,15,12,.66) 44%,
    rgba(8,15,12,.475) 46%,
    rgba(8,15,12,.29) 48%,
    rgba(8,15,12,.12) 50%,
    rgba(8,15,12,.04) 51.5%,
    rgba(8,15,12,0) 53%) !important;
}

/* =====================================================================
   O VÉU QUE VALE (2026-08-21, segunda rodada)

   O Alê olhou a versão de cima rodando e disse: MUITO PRETO, quer um
   degradê melhor e mais suave. O contraste já estava resolvido, então o
   problema não era medida, era leitura: aquilo lia como PAINEL PRETO
   COLADO por cima de meia cena, que é literalmente o bloqueador "véu que
   emoldura uma caixa" da revisao-contraia.md.

   Medido antes de mexer, e são TRÊS defeitos, não um:

   1) ERA CHAPADO. Alfa .86 de tinta quase preta comprime tudo que está
      embaixo numa faixa de 14% do valor original. Céu, morro, asfalto e
      faixa viram o MESMO tom. Perder a estrutura interna é o que faz o
      olho ler "camada", e não "sombra": sombra de verdade escurece e
      mantém o que está debaixo. Este é o defeito principal, e nenhum
      ajuste de curva o resolve.
   2) ERA RETÂNGULO. Alfa constante do topo ao pé da tela, o que não
      acontece em luz nenhuma. O canto de cima ficava preto justo onde o
      fim de tarde é o argumento da cena, e o pé apagava a pista inteira.
   3) ERA NEUTRO. Tinta 8,15,12 é preto puro sobre dourado, e preto sobre
      dourado dá LAMA marrom-oliva na zona de meio-tom. É a faixa mais
      visível do degradê e era a mais suja.

   As três correções, uma por defeito:

   1) `mix-blend-mode: multiply`. A camada agora MULTIPLICA em vez de
      cobrir, então a pista, a faixa, o morro e a gradação do céu
      continuam visíveis dentro da sombra. Foi a mudança que mais rendeu.
      O platô vale k=0.30 (escurece 70%), contra os 86% de antes.
   2) máscara vertical elíptica. A sombra ganhou PONTAS: some no topo, some
      no pé, e some nos cantos. Deixou de correr de borda a borda.
   3) o multiplicador é levemente FRIO (verde no lugar do cinza puro,
      71,80,78). Escurecendo, o dourado esfria em vez de embarrar, que é
      o mesmo caminho que o céu da cena já faz sozinho (ceuAlto 0x22453a).

   ⚠️ A GEOMETRIA HORIZONTAL NÃO MUDOU, E É DE PROPÓSITO. Platô até 60% da
   largura, rampa de 60% a 46%, nada à esquerda disso. Foi medido de novo
   nas 5 larguras e continua sendo o único arranjo que serve os dois: a
   coluna de texto começa em 50,1% (901), 54,1% (1440) e 64,6% (1920), e a
   borda direita do caminhão bate em 51,3% (901) e 50,9% (1440) no início
   da viagem. Mexer a rampa para a esquerda joga véu no caminhão; para a
   direita descobre o texto. A TRAVA DO CAMINHÃO SEGUE VALENDO.

   Uma inclinação de 9° na fronteira (para acompanhar a fuga da pista) foi
   testada e REPROVADA: melhora o desenho e estraga o número, porque puxa a
   sombra para cima e para a direita e deixa 20 a 29% da caixa do rótulo
   dourado abaixo de 4,5:1, contra 12% sem inclinação.

   ⚠️ OS NÚMEROS DESTE BLOCO SÃO DA SEGUNDA RODADA e não descrevem mais
   o que está no arquivo: o platô e o multiplicador mudaram na terceira
   rodada, logo abaixo. O que continua valendo aqui é o DIAGNÓSTICO (os
   três defeitos e as três correções), não a medida.

   Medido depois, texto ESCONDIDO, pior de 4 amostras, 5 larguras:
   · pior mediana de contraste 7,50:1 (era 9,71:1, o piso é 4,5:1);
   · caminhão: alfa máximo 0,128 no início e 0,00 no meio e no fim, contra
     0,116 de antes. Ou seja, ele leva o mesmo que já levava.
   O contraste caiu de 2x acima do piso para 1,7x acima do piso, e é essa
   folga entregue que compra a cena de volta.

   Sem `mix-blend-mode` cai na regra de cima. Sem `mask-image` (e só nesse
   caso) o véu fica sem as pontas, o que escurece MAIS: degrada para o lado
   seguro, nunca para o lado ilegível. */
/* =====================================================================
   TERCEIRA RODADA (2026-08-21). O Alê olhou de novo, ao vivo: "deixe o
   degradê da direita bem menor, eu acho que tá muito escuro ainda."

   Duas dimensões mexidas juntas, porque as duas estavam grandes:
   · o PLATÔ encolheu de 38% para 24% da direita (a rampa passou a
     começar 14 pontos mais cedo, e é isso que faz a mancha escura
     parecer menor: o fim de tarde volta a atravessar a tela);
   · o MULTIPLICADOR clareou de k=0,31 para k=0,42, ou seja, o platô
     escurece 58% em vez de 69%.
   A rampa continua terminando em 51%, quase onde terminava (54%), e
   isso NÃO é sobra: é o que segura o rótulo dourado, que mora
   exatamente na borda esquerda da coluna de texto. Encurtar a rampa
   também (testado terminando em 46%) descobre a primeira palavra do
   rótulo e derruba o contraste sem deixar a cena visivelmente mais
   leve, então ficou de fora. A trava do caminhão segue de pé com folga
   maior do que antes.

   Medido de novo, mesma metodologia (texto ESCONDIDO, pior de 4
   amostras, 5 larguras), no pior ponto de scroll:
   · rótulo dourado: mediana 5,33:1 (era 7,75:1; o piso é 4,5:1);
   · título e subtítulo: 13,9:1 e 12,3:1, folga larga;
   · caminhão: alfa máximo do véu 0,02 no início e 0,00 no meio e no
     fim (era 0,13 e 0,03). Ele leva MENOS véu do que levava.

   O preço, dito por inteiro: a tira colada na borda esquerda do rótulo
   passou de 12% para 42% da caixa abaixo de 4,5:1. A mediana continua
   acima do piso em todas as larguras, mas a folga caiu de 1,7x para
   1,2x. Foi até onde dava: um passo a mais (platô 20%, k=0,48) põe a
   mediana em 4,03:1, abaixo do piso, e aí é texto ilegível, não véu
   leve. Se for para ir além disso, o caminho é mudar o rótulo (peso,
   cor ou posição), nunca afinar mais o véu. */
@supports (mix-blend-mode:multiply){
  .tem-3d .hero__veu{
    background:linear-gradient(to left,
      rgb(95,107,104)    0%,
      rgb(95,107,104)   24%,
      rgb(108,119,116) 29.1%,
      rgb(137,146,143) 34.1%,
      rgb(177,183,181) 39.2%,
      rgb(215,218,217) 44.3%,
      rgb(239,240,240) 47.6%,
      rgb(255,255,255)   51%) !important;
    mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(ellipse 135% 74% at 104% 54%,
      #000 0%, #000 48%, rgba(0,0,0,.9) 68%, rgba(0,0,0,.66) 84%,
      rgba(0,0,0,.4) 95%, rgba(0,0,0,.26) 100%);
    mask-image:radial-gradient(ellipse 135% 74% at 104% 54%,
      #000 0%, #000 48%, rgba(0,0,0,.9) 68%, rgba(0,0,0,.66) 84%,
      rgba(0,0,0,.4) 95%, rgba(0,0,0,.26) 100%);
  }
}

/* Com a cena viva o hero é a tela inteira: o cabeçalho flutua por cima e
   a viagem pinada não deixa nenhuma fresta da seção de baixo aparecer.
   O primeiro frame é CENTRADO: título e ações no meio da tela, a estrada
   fugindo por trás, e o caminhão chegando pelo centro. */
@media (min-width:901px){
  /* Texto na coluna DIREITA, caminhão na faixa da ESQUERDA: cada um no
     seu território, nunca sobrepostos (o Alê reprovou o texto
     centralizado duas vezes; não voltar a centralizar). O hero é a tela
     inteira e centra o bloco na vertical.

     ⚠️ DECISÃO FINAL DO ALÊ, 2026-08-15: "faça uma troca de lado pro
     caminhão ficar na esquerda e texto na direita, motorista também precisa
     dirigir na mão certa." A coluna da direita é CONSEQUÊNCIA da mão de
     direção, não gosto: o caminhão chega com ~207px de largura e os dois não
     cabem no mesmo lado em nenhuma largura de tela. Esta mesma composição
     existiu em 2026-08-03 e foi revertida no mesmo dia; em 15/08 ele voltou
     atrás e pediu o lado correto de volta. NÃO REVERTER SEM PEDIDO NOVO.
     O porquê técnico inteiro está no topo do js/hero-3d.js. */
  .tem-3d .hero__int{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    /* ⚠️ PEDIDO DO ALÊ, 2026-08-15: "o texto do head tem que alinhar à
       direita". Antes só o BLOCO encostava na direita (align-items) e o
       texto seguia alinhado à esquerda dentro dele, o que deixava a margem
       direita serrilhada bem na borda da tela. Agora as linhas fecham na
       direita de verdade. Isto NÃO é centralizar: centralizar ele reprovou
       duas vezes. */
    text-align:right;
  }
  /* se a linha de botões quebrar (901px), a segunda fileira também encosta
     na direita em vez de voltar pra esquerda */
  .tem-3d .hero__acoes{justify-content:flex-end}
  /* O botão de emergência empilha rótulo em cima e número embaixo, e nasce
     alinhado à esquerda por dentro (`.btn--fone`). Ele é o elemento mais à
     direita da linha: mantido assim, as duas linhas dele deixavam um degrau
     ragged justo na margem que todo o resto agora fecha. Espelhado aqui, e
     só aqui: no resto do site o botão continua como sempre foi.
     O botão dourado NÃO muda: texto de botão centrado nele mesmo é o certo,
     e o glifo do WhatsApp continua à esquerda do rótulo, que é como se lê. */
  .tem-3d .hero__acoes .btn--fone{align-items:flex-end;text-align:right}
  .tem-3d .hero{
    min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:flex-end;
    /* bloco de texto ancorado embaixo: a estrada e o caminhão ficam com a
       metade de cima da tela (pedido do Alê) */
    padding-top:0;
    padding-bottom:clamp(100px,13vh,150px);
  }
  .tem-3d .hero__tit{max-width:16ch}

  /* correções do parecer do Kage (2026-07-28) */
  /* o rótulo dizia o que a empresa faz e era ilegível sobre o céu claro */
  .tem-3d .rotulo--claro{
    color:#fff;
    text-shadow:0 1px 2px rgba(7,14,11,.55),0 2px 14px rgba(7,14,11,.4);
  }
  /* botão translúcido deixava a linha da pista atravessar por dentro */
  .tem-3d .btn--fone{
    background:rgba(14,24,20,.82);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
}

/* =====================================================================
   A VIAGEM
   Com a cena viva o hero é pinado pelo ScrollTrigger e o scroll vira
   estrada: a câmera avança, o texto de abertura sai e estas etapas
   entram uma por vez. Opacidade e deslocamento são escritos pelo JS a
   cada quadro (função da própria posição do scroll), então aqui só mora
   a aparência. */
.tem-3d .hero__etapas{display:block}

.tem-3d .hero.hero--viajando .hero__int{will-change:opacity,transform}

/* a parada da viagem mora na MESMA coluna do texto de abertura: à direita,
   desde o espelhamento de 2026-08-15. Nunca centralizar (o Alê reprovou
   duas vezes) e nunca deixar encostar no caminhão, que agora chega pela
   esquerda: sobreposição é regra travada deste hero. */
.etapa{
  position:absolute;
  right:clamp(24px,7vw,120px);
  top:50%;
  transform:translateY(-46%);
  max-width:min(560px,42vw);
  z-index:2;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.etapa__rot{
  margin:0 0 14px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ouro-claro,#e6c98a);
}
.etapa__tit{
  margin:0;
  font-family:var(--f-tit,inherit);
  font-size:clamp(2.6rem,4.6vw,4.2rem);
  line-height:1.04;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 26px rgba(8,15,12,.45);
}
.etapa__sub{
  margin:14px 0 0;
  font-size:clamp(1.35rem,2vw,1.8rem);
  font-weight:600;
  color:var(--claro-2,#e9e4d8);
}
.etapa--fecho .etapa__tit{font-size:clamp(2.2rem,3.6vw,3.4rem)}
.etapa--fecho .btn{margin-top:28px;pointer-events:auto}

/* dica de rolagem: some assim que a viagem começa (JS controla a opacidade) */
.hero__dica{
  position:absolute;
  left:50%;
  bottom:44px;
  transform:translateX(-50%);
  margin:0;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  z-index:2;
  pointer-events:none;
}
.hero__dica::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-14px;
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,.75);
  border-bottom:2px solid rgba(255,255,255,.75);
  transform:translateX(-50%) rotate(45deg);
}