/* 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. */
.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;
}

/* 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);
}