/*
  CYAN-WP-03 — acessibilidade.

  1. Botão de pausa/retomar do carrossel do Hero (WCAG 2.2.2). Discreto:
     34px, semitransparente, canto inferior direito do .hero.
  2. Indicador de foco visível para teclado (WCAG 2.4.7) — só aparece em
     navegação por teclado (:focus-visible), não altera nenhum estado de repouso.

  Estas são as ÚNICAS regras visuais novas do marco. Screenshot gate aplicado.
*/

/* ---- 1. Hero: botão pausa/play ---- */
.hero-pause {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 32%);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms ease;
}
@media (hover: hover) {
  .hero-pause:hover {
    background: rgb(0 0 0 / 55%);
  }
}
.hero-pause:focus-visible {
  background: rgb(0 0 0 / 55%);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.hero-pause-icon {
  display: block;
  box-sizing: border-box;
}
/* Estado "tocando" → mostra o ícone de PAUSA (duas barras). */
.hero-pause[data-state='playing'] .hero-pause-icon {
  width: 12px;
  height: 13px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
/* Estado "pausado" → mostra o ícone de PLAY (triângulo). */
.hero-pause[data-state='paused'] .hero-pause-icon {
  width: 0;
  height: 0;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
@media (max-width: 767px) {
  .hero-pause {
    right: 10px;
    bottom: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pause {
    transition: none;
  }
}

/* ---- 2. Foco de teclado visível ---- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary-alt);
  outline-offset: 2px;
}
/* No header laranja e nos cards escuros, contorno branco tem mais contraste. */
.site-header a:focus-visible,
.hero a:focus-visible,
.advantages a:focus-visible,
.contacts a:focus-visible,
.hero-pause:focus-visible {
  outline-color: #fff;
}