/* Correções de responsividade em mobile (carregado depois do CSS do bundle).
   Só abaixo de 1024px: o aspeto em desktop mantém-se igual. */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
  /* O header fixo (~97px) tapava ou encostava ao topo da primeira secção de cada página. */
  main > section:first-of-type { padding-top: 112px !important; }
  /* Botão do menu com área de toque >= 44px. */
  header button[aria-label="Abrir menu"],
  header button[aria-label="Fechar menu"], header nav button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* Pontos do carrossel: área de toque alargada sem mudar o desenho. */
  [aria-label^="Mostrar imagem"] { position: relative; }
  [aria-label^="Mostrar imagem"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  /* Ligações do rodapé: área de toque de 44px sem alterar o espaçamento visual. */
  footer li > a, footer a.inline-block, footer a.inline-flex, footer a[href^="tel:"], footer a[href^="mailto:"] { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  /* Títulos longos não rebentam a largura. */
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
  img, video, svg { max-width: 100%; }
}