/* ===== VCL — fundo marítimo animado (vídeo fixo atrás de tudo) ===== */
#vcl-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#070a0f}
#vcl-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#vcl-bg-tint{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,12,.72), rgba(6,8,12,.82))}

/* deixa as camadas opacas transparentes p/ o vídeo aparecer */
html,body{background:transparent !important}
#root{background:transparent !important}
#transportes,#servicos,#sobre,#como-funciona,#cotacao{background-color:transparent !important}
.vcl-bg-clear{background-color:transparent !important;background-image:none !important}

/* HEADER transparente: acompanha o fundo (sem barra sólida); leve degradê só p/ legibilidade */
nav.fixed{
  background:linear-gradient(180deg, rgba(7,9,13,.5) 0%, rgba(7,9,13,.14) 65%, rgba(7,9,13,0) 100%) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:none !important;border:0 !important;
}
/* (menu aberto = transparente; vê o site atrás. Aplicado via bg.js) */

/* RODAPÉ legível: scrim (escurecido) aplicado inline via bg.js + texto forte/sombra como o hero */
.vcl-foot h1,.vcl-foot h2,.vcl-foot h3,.vcl-foot h4,.vcl-foot h5,.vcl-foot h6,.vcl-foot strong{color:#ffffff !important}
.vcl-foot p,.vcl-foot a,.vcl-foot li,.vcl-foot span{color:#eef0f4 !important}
.vcl-foot, .vcl-foot *{text-shadow:0 1px 5px rgba(0,0,0,.9) !important}