/* hb-mobile.css — HEAD BROKER
 * Ajustes de telefone. Carrega DEPOIS do <style> de cada pagina, entao vence
 * sem precisar de !important. A fonte Archivo e variavel (wdth 62..125): em
 * tela pequena a gente CONDENSA em vez de so diminuir o corpo — palavra longa
 * como EMPREENDIMENTOS cabe sem virar letrinha.
 */

/* a logo nova e um lockup de 2 linhas + CRECI: precisa de mais altura que a
   antiga (1 linha) para continuar legivel. Regra base, fora de media query. */
.nav img.logo-hb, .marca img { height: 56px; width: auto; object-fit: contain; display: block }
.hbf-marca img { height: 52px; width: auto }

@media (max-width: 860px) {
  .nav img.logo-hb, .marca img { height: 50px }
}

@media (max-width: 640px) {

  /* texto que so cabe no desktop */
  .so-desk { display: none }


  /* ---- titulos: condensa a largura do glifo ---- */
  .display,
  .hero h1, .hero-v2 h1, .cat-head h2, .sec-h {
    font-variation-settings: 'wdth' 88, 'wght' 830;
    letter-spacing: -.015em;
    overflow-wrap: break-word;
  }

  /* ---- home: hero ---- */
  .nav img.logo-hb, .marca img { height: 46px }
  .hbf-marca img { height: 46px }
  .hero-v2 { padding-top: 40px }
  .hero-v2 h1 { font-size: clamp(28px, 8.2vw, 44px); line-height: 1.02 }
  .hv-badge { font-size: 10.5px; letter-spacing: .09em; padding: 8px 14px; line-height: 1.35 }
  .hv-sub { font-size: 15px; margin-top: 18px }
  .hv-ctas { margin-top: 24px; gap: 10px }
  .hv-ctas .btn { width: 100%; font-size: 14.5px; padding: 15px 18px }
  .hv-provas { gap: 10px 16px; margin: 22px 0 2px; font-size: 12px }
  .hv-marquee { margin-top: 30px; padding-bottom: 40px }

  /* ---- vitrine: o "EMPREENDIMENTOS" que estourava ---- */
  .hero h1 { font-size: clamp(26px, 8vw, 44px); line-height: 1.03 }
  .cat-head h2 { font-size: clamp(21px, 6vw, 32px) }
  .numeros { gap: 12px }
  .numeros .num b { font-size: 26px }
  .numeros .num span { font-size: 11.5px }
  .hero-ctas .btn { width: 100%; justify-content: center }

  /* ---- LPs ---- */
  .sec-h { font-size: clamp(22px, 6.4vw, 34px) }

  /* ---- nada pode empurrar a pagina de lado ---- */
  html, body { max-width: 100%; overflow-x: hidden }
  img, svg, video { max-width: 100% }
}

@media (max-width: 380px) {
  .hero-v2 h1 { font-size: 26px }
  .hero h1 { font-size: 24px }
  .display, .hero h1, .hero-v2 h1 { font-variation-settings: 'wdth' 80, 'wght' 830 }
  .hv-card { width: 200px; height: 282px }
}

/* modal de captura: nunca pode passar da tela */
@media (max-width: 480px) {
  .zl-back { padding: 12px }
  .zl-card { max-height: 90vh }
}