/* site-mobile.css — overrides de mobile que o protótipo trazia INLINE em cada
 * página (<style> no <head>, idênticos entre Home/Hub/Saúde/conectores/...). 
 * A SPA tinha portado os componentes e o ds/mobile.css global, mas perdeu esses
 * blocos inline — então o baseline do mobile.css (h2:24px) vencia e os títulos
 * ficavam menores que o projetado (cabiam em 1 linha → desalinhados/"sem
 * enquadramento"). Carregado DEPOIS de mobile.css para vencer por ordem.
 *
 * Fonte: project/Home.html (e demais) — bloco @media (max-width:560px). */

@media (max-width: 560px) {
  section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  /* Hero da página precisa limpar o nav fixo (~81px) */
  main > section:first-child {
    padding-top: 96px !important;
  }

  /* Títulos display — tamanhos fixos, sobrepõem o mínimo do clamp */
  h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  h2 {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
  }
  h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* Corpo */
  p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  /* Eyebrows (labels .14em) */
  [style*='letter-spacing: 0.14em'],
  [style*='letterSpacing: ".14em"'],
  [style*='letterSpacing:".14em"'] {
    font-size: 11px !important;
  }
}
