/* ===== hero no celular: faixa cheia + traco de progresso =====
   abaixo de 1000px as abas laterais saem e a faixa ativa ocupa a largura inteira.
   no computador nada muda: as tres faixas continuam como estao. */
@media(max-width:1000px){
 .hero .fx{flex:0 0 0;min-width:0;border-left:0;overflow:hidden}
 .hero .fx.on{flex:1 1 100%}
 .hero .vt{display:none}
 .hero .ab{padding:96px 20px 104px}
 .hero .cod{display:none}

 .hmbar{position:absolute;left:0;right:0;bottom:0;z-index:30;
  padding:0 20px 24px;display:flex;flex-direction:column;gap:11px;pointer-events:none}
 .hmbar>*{pointer-events:auto}
 .hmrot{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#BFD8F2;display:flex;gap:9px;align-items:baseline;line-height:1.25}
 .hmrot b{font-family:'Roboto Mono',monospace;font-size:11px;color:#8FC0F5;font-weight:400;flex:none}
 .hmrot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .hmtr{display:flex;gap:7px}
 .hmtr i{flex:1;height:2.5px;background:rgba(255,255,255,.26);display:block;position:relative;
  overflow:hidden;border-radius:2px;cursor:pointer}
 .hmtr i::after{content:"";position:absolute;inset:0;width:0;background:#EAF4FF;border-radius:2px}
 .hmtr i.feito::after{width:100%}
 .hmtr i.on::after{animation:hmEnche var(--dur,8s) linear forwards}
 @keyframes hmEnche{from{width:0}to{width:100%}}
}
@media(min-width:1001px){.hmbar{display:none}}
@media(prefers-reduced-motion:reduce){.hmtr i.on::after{animation:none;width:100%}}