/* ==========================================================================
   O TOQUE
   Esta folha existe por um motivo só: no celular o site tinha que ser
   tocado duas vezes.

   O porquê: dedo não passa o mouse. Quando uma página tem regra de :hover,
   o Safari e o Chrome do celular gastam o PRIMEIRO toque desenhando esse
   hover e engolem o clique. O segundo toque é que abre o link. Quem usa
   sente um site quebrado.

   O conserto tem três partes:

   1. Cada regra de :hover do site passou a viver dentro de
      @media (hover:hover), valendo só onde existe mouse de verdade. Isso foi
      feito nos arquivos de estilo, um por um.

   2. O :focus dos elementos clicáveis virou :focus-visible. Tocar num link
      dá foco a ele; com a regra antiga o botão ficava preto depois do
      toque, parecendo travado. Agora a marca de foco só aparece para quem
      navega pelo teclado, que é para quem ela serve.

   3. Este arquivo: o toque ganha resposta própria (o botão afunda de leve
      ao ser pressionado), o alvo nunca fica menor que o dedo e o que só
      aparecia no hover passa a estar sempre visível no celular.

   Carrega por último, depois de ze.css.
   ========================================================================== */

/* ---------- o clique entra na hora ----------
   "manipulation" avisa o navegador que aqui não existe toque duplo para
   dar zoom. Sem esse aviso alguns aparelhos ainda esperam para ver se vem
   um segundo toque, e o site responde com atraso. */
a,
button,
label,
summary,
[role="button"],
[role="link"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select,
.btn,
.js-button,
.linkSeta,
.tocarVideo,
.chamadaVideo__link,
.navbar-toggle,
.containerBarras,
.filtrosPortfolio li,
.trilha__passo,
.leitura__passo,
.leitor__aa,
.slides__seta,
.slides__mini,
.slides__fechar,
.esteira__peca,
.marcaPeca,
.mqPeca,
.artigoCartao,
.ganhoCartao,
.ferrItem,
.capitulo {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ---------- o dedo precisa de resposta ----------
   Sem hover, o toque ficaria mudo. O botão afunda enquanto está sendo
   pressionado e volta ao soltar: é rápido, é discreto e diz "eu ouvi". */
.zp .btn:active,
.zp .linkSeta:active,
.js-button:active,
.chamadaVideo__link:active {
  -webkit-transform: translateY(1px) scale(.985);
          transform: translateY(1px) scale(.985);
  -webkit-transition-duration: .06s;
          transition-duration: .06s;
}

.zp .artigoCartao:active,
.zp .ganhoCartao:active,
.zp .ferrItem:active,
.zp .capitulo:active,
.zp .esteira__peca:active {
  -webkit-transform: scale(.99);
          transform: scale(.99);
  -webkit-transition-duration: .06s;
          transition-duration: .06s;
}

/* ---------- no celular, o que era do hover fica à mostra ----------
   Estes rótulos só apareciam ao passar o mouse. Num aparelho de toque isso
   quer dizer "nunca". Passam a estar sempre visíveis. */
@media (hover: none) {
  .zp .esteira__peca span { opacity: 1; }
  .marcaPeca__nome,
  .zp .mqPeca__nome { opacity: 1; }
  .zp .subnav__links a { opacity: 1; }
}

/* ---------- alvo do tamanho do dedo ----------
   44px é o mínimo que a Apple e o Google recomendam. Vale para tudo que
   se toca, não só para os botões grandes. */
@media (pointer: coarse) {
  .zp .btn,
  .js-button,
  .navbar-toggle,
  .slides__seta,
  .slides__fechar,
  .leitor__aa,
  .trilha__passo,
  .leitura__passo {
    min-height: 44px;
  }
  .zp .linkSeta {
    min-height: 44px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  /* dois links colados na mesma linha ficam difíceis de acertar */
  .zp .subnav__links a { padding: 8px 2px; }
}

/* ---------- o menu de tela cheia responde ao toque ----------
   O botão do menu vive dentro de um <a href="#">. O toque precisa chegar
   ao botão, não parar no link vazio. */
.containerBarras,
.containerBarras button {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

/* ---------- quem pediu para não ver movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .zp .btn:active,
  .zp .linkSeta:active,
  .js-button:active,
  .chamadaVideo__link:active,
  .zp .artigoCartao:active,
  .zp .ganhoCartao:active,
  .zp .ferrItem:active,
  .zp .capitulo:active,
  .zp .esteira__peca:active {
    -webkit-transform: none;
            transform: none;
  }
}