/* ============================================================
   HERO DA HOME · vídeo de fundo (cisterna ECOCASA içada, pôr do sol)
   Vídeo leve (4.4MB) + overlay verde p/ manter a marca e a legibilidade.
   ============================================================ */
/* CALIBRE 27/07/2026 (Henrique): "tirar um pouquinho da opacidade pra gente ver um
   pouco melhor o vídeo" — pedido para TODOS os heros com vídeo de fundo.
   Mexemos nos dois botões ao mesmo tempo: sobe a opacidade do <video> e afrouxa a
   tinta do scrim. O scrim continua fechando as BORDAS e a BASE, que é onde moram o
   H1 e as linhas pequenas — abrir o miolo mostra o clipe sem custar legibilidade.
   Se ele pedir "mais vídeo ainda", subir .hero-vid antes de tirar mais tinta:
   clarear o scrim é o que apaga o texto primeiro. */
.hero{isolation:isolate}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.68;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 32%,rgba(8,42,30,.24),rgba(8,42,30,.56) 68%,rgba(8,42,30,.84))}
@media(max-width:560px){.hero-vid{opacity:.52}}
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}

/* --- hero de PRODUTO (Sérgio 20/07/2026) ------------------------------------
   O hero de produto é de dois lados (texto à esquerda, viewer 3D à direita), ao
   contrário do da Global, que é centralizado. Por isso o scrim aqui é horizontal:
   protege as DUAS bordas — onde vivem o texto e o produto — e deixa o miolo mais
   aberto, que é a única faixa onde o vídeo pode aparecer sem competir.
   O radial de baixo continua ancorando o rodapé da seção na cor da marca. */
.hero3d .hero-vid{opacity:.60}
.hero-scrim.prod{
  background:
    linear-gradient(90deg,rgba(8,42,30,.92) 0%,rgba(8,42,30,.58) 26%,
                          rgba(8,42,30,.34) 50%,
                          rgba(8,42,30,.70) 74%,rgba(8,42,30,.93) 100%),
    radial-gradient(120% 80% at 50% 108%,rgba(8,42,30,.86),rgba(8,42,30,0) 62%)}
@media(max-width:900px){
  /* empilhado, o conteúdo ocupa a largura toda: volta a precisar de escuro parelho */
  .hero3d .hero-vid{opacity:.46}
  .hero-scrim.prod{background:linear-gradient(180deg,rgba(8,42,30,.80),rgba(8,42,30,.90))}
}
/* Os anéis eram a decoração do hero; com vídeo atrás viram ruído sobreposto.
   Mas o hero-video.css esconde o vídeo em prefers-reduced-motion — então em vez de
   apagar os anéis de vez, só os recuamos QUANDO há vídeo. Quem pede menos movimento
   perde o vídeo e recupera os anéis: o hero nunca fica sem fundo nenhum. */
@media(prefers-reduced-motion:no-preference){
  .hero3d .rings{opacity:.28}
}
/* --- fim hero de produto ---------------------------------------------------- */

/* --- hero de FAMÍLIA · projetos-pequenos (Sérgio 22/07/2026) -----------------
   Clipe: família numa casa nova (Pexels 7348148). É MUITO claro (parede e janela
   brancas estouradas) — no calibre padrão (.56) o H1 branco perde a borda e some
   nos claros. Por isso o vídeo entra mais discreto aqui e o scrim padrão (verde,
   radial) faz o resto. Não é o mesmo caso do hero de produto: lá o clipe é
   escuro e o problema era o oposto. */
.hero-fam .hero-vid{opacity:.54}
@media(max-width:560px){.hero-fam .hero-vid{opacity:.38}}

/* --- hero da ENGENHARIA (Sérgio 22/07/2026) ---------------------------------
   Pedido: "vídeo longo de fundo relacionado ao tema + filtro de azul BEM LEVE,
   pra não deixar ilegível as letras grandes e pequenas."
   Clipe: video/hero-global.mp4 — vista aérea de estação de tratamento
   (decantadores + tanques de aeração). É literalmente engenharia hídrica, e o
   movimento é lento/quase simétrico, então o loop não denuncia.

   Por que AZUL e não o verde da casa: foi pedido explícito. E funciona aqui —
   o clipe é terroso/esverdeado, então a tinta azul separa o fundo do texto por
   MATIZ, não só por brilho; dá pra manter a tinta leve e ainda assim ler.

   "Leve" com legibilidade real: a tinta azul fica fraca no MIOLO (onde a imagem
   deve aparecer) e fecha nas bordas/base — que é justamente onde moram o H1
   grande e as linhas pequenas. Sem a camada de baixo, o texto pequeno some no
   contraste da imagem aérea, que tem muito detalhe de alta frequência. */
.hero-eng .hero-vid{opacity:.64}
.hero-scrim.eng{
  background:
    /* 1) leitura: fecha topo e base, deixa o meio respirar */
    linear-gradient(180deg,rgba(4,26,48,.72) 0%,rgba(4,26,48,.18) 42%,
                           rgba(4,26,48,.62) 78%,rgba(4,26,48,.86) 100%),
    /* 2) a tinta azul em si, leve e centrada */
    radial-gradient(130% 100% at 50% 34%,rgba(12,74,124,.15),rgba(5,32,58,.62) 70%,rgba(4,24,44,.80));
}
@media(max-width:900px){
  /* empilhado o texto ocupa tudo: precisa de tinta mais parelha */
  .hero-eng .hero-vid{opacity:.46}
  .hero-scrim.eng{background:linear-gradient(180deg,rgba(4,26,48,.78),rgba(4,26,48,.90))}
}