/* 01 hero: título em vidro líquido laranja neon.
   O canvas (js/hero.js, WebGL) cobre o hero inteiro atrás do conteúdo. Sem WebGL fica o .neon do base. */
.hero{
  padding-top:calc(var(--nav-h) + clamp(40px,8.5vh,104px));
  padding-bottom:clamp(64px,10vh,120px);
  overflow:hidden;isolation:isolate;background:var(--preto);
}
/* luz de reserva (sem WebGL): manchas laranja suaves e a mesma grade fina de pontos do shader */
.hero::before,.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.hero::before{
  background:
    radial-gradient(48% 52% at 84% 34%,rgba(255,77,36,.22),transparent 70%),
    radial-gradient(26% 30% at 90% 30%,rgba(255,141,99,.12),transparent 70%),
    radial-gradient(42% 40% at 18% 86%,rgba(255,77,36,.09),transparent 70%);
}
.hero::after{
  background-image:radial-gradient(circle,rgba(236,234,228,.07) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 70% at 80% 36%,#000,transparent 75%);
  mask-image:radial-gradient(70% 70% at 80% 36%,#000,transparent 75%);
}
@media (max-width:700px){
  .hero::before{background:
    radial-gradient(90% 40% at 92% 6%,rgba(255,77,36,.22),transparent 70%),
    radial-gradient(70% 34% at 4% 92%,rgba(255,77,36,.12),transparent 70%)}
  .hero::after{-webkit-mask-image:radial-gradient(90% 50% at 80% 12%,#000,transparent 75%);mask-image:radial-gradient(90% 50% at 80% 12%,#000,transparent 75%)}
}
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.1s var(--ease);pointer-events:none}
.hero.gl-on .hero-gl{opacity:1}
.hero::after{transition:opacity 1.1s var(--ease)}
.hero.gl-on::after{opacity:0}
.hero-cx{position:relative;z-index:1}

.hero-rotulo{color:var(--osso-2)}
.hero-h1{margin-top:clamp(22px,3vh,34px);font-size:clamp(52px,9.6vw,148px);max-width:none;text-wrap:wrap}
.hero-linha{display:block}
.hero-h1 .neon{padding-bottom:0}
.hero-h1.vidro-gl ::selection{background:rgba(255,77,36,.35);color:transparent;-webkit-text-fill-color:transparent}

/* WebGL no ar: o texto do DOM fica transparente (mesmo layout, continua selecionável). */
.hero-h1.vidro-gl{color:transparent;-webkit-text-fill-color:transparent;transition:color .9s var(--ease),-webkit-text-fill-color .9s var(--ease)}
.hero-h1.vidro-gl .neon{background:none;filter:none;animation:none;color:transparent;-webkit-text-fill-color:transparent}

.hero-apoio{margin-top:clamp(22px,3.2vh,34px);max-width:none;color:var(--osso-2)}
@media (min-width:700px){.hero-apoio-2{display:block}}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vh,40px)}
.hero-acoes .btn{min-width:0}

/* faixa de status ao vivo */
.hero-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:clamp(36px,6vh,64px)}
.hero-vivo{
  display:inline-flex;align-items:center;gap:12px;min-width:0;max-width:100%;
  height:38px;padding:0 18px 0 14px;border-radius:var(--pill);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 40px -18px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  font-size:12.5px;color:var(--osso-2);white-space:pre;
}
.hv-ponto{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--tang);box-shadow:0 0 8px rgba(255,77,36,.9),0 0 18px rgba(255,77,36,.5)}
.hv-ponto::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,77,36,.7);animation:hv-pulso 1.8s var(--ease) infinite}
@keyframes hv-pulso{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.9);opacity:0}}
.hv-txt{display:inline-block;width:41ch;max-width:100%;overflow:hidden;text-overflow:clip}
.hv-agente{color:var(--tang-claro)}
.hv-txt::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:var(--tang);opacity:.85;animation:hv-cursor 1s steps(1) infinite}
@keyframes hv-cursor{50%{opacity:0}}
.hero-vivo.apagando .hv-txt{opacity:0;transition:opacity .18s}

@media (max-width:560px){
  .hero-acoes .btn{flex:1 1 100%}
  .hero-status{gap:10px}
  .hero-status .exemplo{order:-1}
  .hero-vivo{flex:1 1 100%;font-size:11.5px;padding:0 14px 0 12px;gap:10px}
  .hv-txt{width:auto;flex:1 1 auto;min-width:0}
}
@media (max-width:380px){.hero-vivo{font-size:11px;padding:0 12px 0 11px}}
/* celular: duas linhas que enchem a largura (o fator 7.3 é a largura de "no automático." em em) */
@media (max-width:480px){
  .hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:72px}
  .hero-h1{font-size:clamp(40px,calc((100vw - 34px) / 7.3),62px);letter-spacing:-.055em}
}