/* ============================================================================
   Trilha sonora — botão global de ligar/desligar o som.
   O áudio começa no primeiro gesto do visitante (política de autoplay dos
   navegadores) e a preferência fica no localStorage. Ver js/audio.js.
   ============================================================================ */
.som{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);
  z-index:40;                         /* acima da navbar (20) e do botão Agendar (30),
                                         abaixo da foto ampliada (1000) */
  width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;
  color:var(--bone);
  background:rgba(5,4,4,.62);
  border:1px solid rgba(224,38,43,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.8), 0 0 0 0 rgba(224,38,43,.5);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .4s ease;
  -webkit-tap-highlight-color:transparent;
}
.som:hover{transform:scale(1.06);border-color:var(--crimson);box-shadow:0 8px 24px -8px rgba(0,0,0,.85),0 0 18px -4px rgba(224,38,43,.5)}
.som:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.som svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ícones: mostra o de "ligado" ou "mudo" conforme o estado */
.som__on,.som__off{grid-area:1/1}
.som__off{display:none}
.som.is-muted{color:var(--bone-dim);border-color:rgba(239,228,214,.3)}
.som.is-muted .som__on{display:none}
.som.is-muted .som__off{display:block}

/* tocando: anel pulsando de leve, no ritmo da brasa do site */
.som.is-playing{animation:som-pulso 2.8s ease-in-out infinite}
@keyframes som-pulso{
  0%,100%{box-shadow:0 6px 20px -8px rgba(0,0,0,.8), 0 0 0 0 rgba(224,38,43,.45)}
  50%{box-shadow:0 6px 20px -8px rgba(0,0,0,.8), 0 0 0 6px rgba(224,38,43,0)}
}

/* dica sutil até o visitante ligar o som pela primeira vez */
.som.is-hint{animation:som-chama 2.2s ease-in-out infinite}
@keyframes som-chama{0%,100%{border-color:rgba(224,38,43,.5)}50%{border-color:var(--crimson)}}

@media (prefers-reduced-motion:reduce){
  .som,.som.is-playing,.som.is-hint{animation:none;transition:none}
}