/* Botón de bocina (activar / silenciar sonidos) en el encabezado */
.snd {
  margin-left: auto; margin-right: 12px; flex: none;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(245, 245, 247, .35); color: #f5f5f7;
  background: rgba(217, 220, 225, .14); transition: background .2s, transform .2s;
}
.snd svg { width: 20px; height: 20px; }
.snd .snd-off, .snd.off .snd-on { display: none; }
.snd.off .snd-off { display: block; }
.snd.off { color: rgba(245, 245, 247, .6); background: transparent; }
@media (hover: hover) { .snd:hover { background: rgba(217, 220, 225, .3); transform: scale(1.06); } }
.snd:focus-visible { outline: 2px solid #e1251b; outline-offset: 3px; }
@media (max-width: 760px) { .snd { margin-right: 0; width: 38px; height: 38px; } }