/* =========================================================
   BPO NEXO — SITE NO CELULAR E NO TABLET
   Carregado por ÚLTIMO no index.html: ajustes de toque, leitura e
   sobreposição que valem por cima de todas as camadas (style,
   noema, canvas, processos, queima, hero-filme). O layout de cada
   seção continua nos arquivos dela; aqui ficam só as correções
   transversais, levantadas numa auditoria em 360, 390, 414, 768,
   834 e 1024px:

   1. A barra fixa de CTA (.cta-fixa) cobria o fim da página.
   2. Alvos de toque: links do rodapé tinham 17px de altura.
   3. Leitura: rótulos em caixa-alta abaixo de 10px.
   4. Sobreposição: o botão "voltar ao topo" ficava por cima dos
      cartões no celular.
   5. Contatos do rodapé tocáveis (e-mail, telefone, WhatsApp).

   Breakpoints do design system: md 768px · lg 1024px.
   ========================================================= */

/* 1 · Fim da página livre da barra fixa (ela tem ~78px no desktop,
   ~93px no tablet e ~70px no celular): sem esta folga o rodapé
   terminava por baixo dela. */
.page { padding-bottom: 104px; }
@media (max-width: 767.98px) {
  .page { padding-bottom: 76px; }
}

/* 2 · Alvos de toque de no mínimo 40px (WCAG 2.5.8 pede 24px; 40px é
   o confortável para o polegar). Vale em telas até o tablet e em
   qualquer tela de toque. */
@media (max-width: 1023.98px), (pointer: coarse) {
  .footer__col ul { gap: 0; }
  .footer__col--nav ul { row-gap: 0; }
  .footer__col ul li a,
  .footer__contato-item a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* o item continua em bloco (um contato por linha) */
  .footer__contato-item { display: flex; align-items: center; min-height: 40px; }
  .footer__social a { width: 40px; height: 40px; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 3 · Rótulos em caixa-alta com no mínimo 11px no celular e no tablet,
   inclusive tablet grande de toque (no desktop com mouse seguem a
   escala do Canvas/NØEMA) */
@media (max-width: 1023.98px), (pointer: coarse) {
  .t-label,
  .grafico-card__titulo,
  .footer__col h4 { font-size: 0.6875rem; }
}

/* 4 · No celular o "voltar ao topo" sai: ele flutuava sobre os cartões
   (a barra fixa de CTA já ocupa a base da tela, e o menu do cabeçalho
   leva a qualquer seção). */
@media (max-width: 767.98px) {
  .fab-topo { display: none; }
}

/* 5 · Contatos do rodapé como links: herdam o visual do item */
.footer__contato-item a { color: inherit; }
.footer__contato-item a:hover { color: var(--text); }