/* Celular. O problema era o menu: 7 links soltos viravam 3 linhas e empurravam
   todo o conteúdo para baixo, num cabeçalho que ainda por cima sumia ao rolar. */
@media (max-width:820px){
  /* Cabeçalho fixo: navegar sem voltar ao topo. */
  .faixa{position:sticky;top:0;z-index:90;background:rgba(5,9,20,.94);
    backdrop-filter:blur(14px);border-bottom:1px solid rgba(126,178,205,.14)}
  .faixa .centro{padding-top:10px;padding-bottom:8px}
  .marca{font-size:17px}

  /* Menu numa linha só, deslizando com o dedo. */
  .faixa nav{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:8px -16px 0;padding:0 16px 2px;scroll-padding-left:16px}
  .faixa nav::-webkit-scrollbar{display:none}
  .faixa nav a{flex:0 0 auto;padding:8px 13px;border-radius:999px;font-size:13px;
    white-space:nowrap;border:1px solid rgba(126,178,205,.16);text-decoration:none}
  .faixa nav a[aria-current]{color:#06101d;background:#37d8ff;border-color:#37d8ff;font-weight:700}

  /* O hero cabia numa tela e meia. Agora cabe numa. */
  .hero{margin-top:14px;padding-bottom:22px;gap:24px}
  .hero h1{font-size:clamp(30px,9vw,40px)}
  .hero-sub{font-size:14.5px;margin-bottom:20px}
  .hero-botoes{gap:9px;margin-bottom:22px}
  .bt-sinal,.bt-linha{flex:1 1 auto;justify-content:center;padding:14px 16px}
  .hero-numeros{gap:0;padding-top:18px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
  .hero-numeros b{font-size:20px}
  .hero-numeros span{font-size:8.5px;letter-spacing:.08em}

  /* Toque confortável nos formulários e nas ações. */
  .linha-campo{flex-direction:column;align-items:stretch;gap:10px}
  .linha-campo input,.linha-campo button,.formulario input,.formulario button{width:100%;font-size:16px;padding:14px}
  .acao > summary{padding:20px}
  .acao-corpo{padding:0 20px 20px}
  main.centro{padding-bottom:40px}
}

/* O menu de ponta a ponta usa margem negativa; sem isto ele alarga a PÁGINA
   inteira e tudo passa da borda direita. Rolagem lateral tem que ser SÓ do menu. */
@media (max-width:820px){
  html,body{overflow-x:hidden;max-width:100%}
  .centro{max-width:100%;box-sizing:border-box}
  .faixa .centro{overflow:hidden}
  .faixa nav{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .hero-numeros{grid-template-columns:1fr 1fr;gap:14px 10px;text-align:left}
  .hero-numeros > div:last-child{grid-column:1/-1}
}

/* O campo virou uma caixa gigante: em linha ele tinha flex:1 para ocupar a sobra;
   ao empilhar em coluna, esse mesmo flex:1 passou a esticar a ALTURA. */
@media (max-width:820px){
  .linha-campo{display:flex;flex-direction:column;align-items:stretch;gap:10px;height:auto}
  .linha-campo input,.formulario input{flex:0 0 auto;height:52px;min-height:0;line-height:1.2;
    padding:0 14px;font-size:16px}
  .linha-campo button,.formulario button{flex:0 0 auto;height:52px;padding:0 16px;font-size:15.5px}
  .formulario label{margin-bottom:6px;display:block}
}